/* ============================================================
   Rowads Design System — Colors + Type Tokens
   Dark-first. Hot pink primary (#ED1165 / hsl(338 91% 50%)).
   HSL triplets are used raw so consumers can wrap in hsl(...)
   and apply alpha via `/ <pct>`.
   ============================================================ */

@font-face {
  font-family: "Geist";
  src: url("../fonts/Geist-VariableFont_wght.ttf") format("truetype-variations"),
       url("../fonts/Geist-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Brand ------------------------------------------------ */
  --brand-pink:         338 91% 50%;   /* #ED1165 */
  --brand-pink-hover:   338 86% 44%;   /* #D10F5A */
  --brand-pink-50:      338 91% 96%;
  --brand-pink-100:     338 91% 90%;
  --brand-pink-500:     338 91% 50%;
  --brand-pink-600:     338 86% 44%;
  --brand-pink-700:     338 82% 38%;

  --accent-violet:      270 60% 60%;   /* #9B6FE6 */
  --accent-blue:        217 91% 60%;   /* tool-block blues */
  --accent-emerald:     160 60% 45%;
  --accent-orange:      24  95% 55%;
  --accent-amber:       38  92% 50%;

  /* --- Semantic (dark, default) ----------------------------- */
  --background:        0 0% 4%;       /* #0a0a0a */
  --foreground:        0 0% 98%;      /* near-white */

  --card:              0 0% 7%;       /* #121212 */
  --card-foreground:   0 0% 98%;

  --popover:           0 0% 7%;
  --popover-foreground:0 0% 98%;

  --primary:           338 91% 50%;
  --primary-foreground:0 0% 100%;

  --secondary:         215 20% 15%;   /* sidebar bg */
  --secondary-foreground: 0 0% 98%;

  --muted:             215 20% 15%;
  --muted-foreground:  215 15% 65%;

  --accent:            270 60% 60%;
  --accent-foreground: 0 0% 100%;

  --destructive:       0 84% 65%;
  --destructive-foreground: 0 0% 100%;

  --border:            215 20% 20%;
  --input:             215 20% 20%;
  --ring:              338 91% 50%;

  /* --- Neutral ramp (for either mode) ----------------------- */
  --gray-50:  0 0% 98%;
  --gray-100: 0 0% 96%;
  --gray-200: 210 15% 92%;
  --gray-300: 210 20% 88%;
  --gray-400: 215 15% 65%;
  --gray-500: 215 15% 45%;
  --gray-600: 215 20% 30%;
  --gray-700: 215 20% 20%;
  --gray-800: 215 20% 15%;
  --gray-900: 0 0% 7%;
  --gray-950: 0 0% 4%;

  /* --- Radii ------------------------------------------------ */
  --radius-sm:  4px;
  --radius-md:  6px;   /* buttons, inputs */
  --radius-lg:  8px;   /* dense controls */
  --radius-xl:  12px;  /* cards */
  --radius-2xl: 16px;  /* pill inputs, send buttons */
  --radius-full: 9999px;
  --radius: 0.75rem;

  /* --- Spacing (flex gaps) ---------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* --- Typography ------------------------------------------- */
  --font-sans:  "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --text-xs:   12px;   /* labels/caps */
  --text-sm:   14px;   /* body dense */
  --text-base: 16px;   /* body */
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;   /* section heading */
  --text-3xl:  30px;
  --text-4xl:  36px;   /* hero h1 */

  --weight-regular:  400;
  --weight-medium:   500;   /* buttons */
  --weight-semibold: 600;   /* titles, strong accents */

  --leading-tight: 1.2;
  --leading-snug:  1.35;
  --leading-normal:1.5;
  --leading-relaxed:1.65;

  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wider:  0.06em; /* uppercase caps */

  /* --- Motion ----------------------------------------------- */
  --dur-fast:     150ms;
  --dur-base:     200ms;
  --dur-slow:     350ms;
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard:ease-out;

  /* --- Shadows ---------------------------------------------- */
  --shadow-sm:    0 1px 2px 0 hsl(0 0% 0% / 0.05);
  --shadow-md:    0 4px 12px -2px hsl(0 0% 0% / 0.12);
  --shadow-lg:    0 10px 30px -10px hsl(0 0% 0% / 0.35);
  --shadow-pink:  0 10px 30px -10px hsl(var(--brand-pink) / 0.35);
  --shadow-pink-sm: 0 4px 14px -4px hsl(var(--brand-pink) / 0.25);
}

/* Light mode — secondary to dark; mirrors the codebase's :root default. */
.light, :root.light {
  --background: 0 0% 100%;
  --foreground: 0 0% 10%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 10%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 10%;
  --primary: 338 91% 50%;
  --primary-foreground: 0 0% 100%;
  --secondary: 210 15% 95%;
  --secondary-foreground: 0 0% 10%;
  --muted: 210 15% 95%;
  --muted-foreground: 215 15% 45%;
  --accent: 270 60% 60%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;
  --border: 210 20% 88%;
  --input: 210 20% 88%;
  --ring: 338 91% 50%;
}

/* ============================================================
   Semantic text styles — drop-in classes that map to the scale.
   Use utility classes OR composed selectors, either works.
   ============================================================ */

.ds-h1 {
  font-family: var(--font-sans);
  font-size: var(--text-4xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: hsl(var(--foreground));
}

.ds-h2 {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: hsl(var(--foreground));
}

.ds-h3 {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: hsl(var(--foreground));
}

.ds-body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: hsl(var(--foreground));
}

.ds-body-sm {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: hsl(var(--foreground));
}

.ds-label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: hsl(var(--foreground));
}

.ds-caps {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
}

.ds-muted {
  color: hsl(var(--muted-foreground));
}

.ds-code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: hsl(var(--primary) / 0.1);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

/* Link + strong accents — these match the `.prose` rules in the app. */
.ds-link {
  color: hsl(var(--primary));
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--dur-base) var(--ease-out);
}
.ds-link:hover { color: hsl(var(--primary) / 0.8); }

.ds-strong {
  color: hsl(var(--primary));
  font-weight: var(--weight-semibold);
}

/* ============================================================
   Signature backgrounds (dark-mode gradient-bg + orbs overlay)
   ============================================================ */

.ds-gradient-bg {
  background: linear-gradient(
    135deg,
    hsl(220 20% 8%) 0%,
    hsl(250 20% 10%) 25%,
    hsl(280 15% 9%) 50%,
    hsl(320 15% 10%) 75%,
    hsl(250 20% 8%) 100%
  );
  background-attachment: fixed;
}
.light .ds-gradient-bg {
  background: linear-gradient(
    135deg,
    hsl(220 80% 95%) 0%,
    hsl(250 60% 96%) 25%,
    hsl(280 50% 95%) 50%,
    hsl(320 40% 96%) 75%,
    hsl(250 60% 97%) 100%
  );
}

.ds-gradient-orbs {
  position: relative;
  isolation: isolate;
}
.ds-gradient-orbs::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 20% -20%, hsl(var(--brand-pink) / 0.15) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 100%, hsl(var(--accent-violet) / 0.10) 0%, transparent 50%),
    radial-gradient(ellipse 50% 50% at 50% 50%, hsl(217 91% 60% / 0.05) 0%, transparent 60%);
  pointer-events: none;
  z-index: -1;
}