/* ============================================================================
   Duolike Design System — Tokens
   ----------------------------------------------------------------------------
   A two-tone system. One ink. One accent. Quiet typography. Generous space.
   Light-mode-first. The "duo" in Duolike is taken seriously: every choice is
   a pair — paired weights, paired sizes, paired tones.
   ============================================================================ */

/* --- TYPE ----------------------------------------------------------------- */
/* Primary: Geist (variable grotesque). Functional, not loud. The wordmark
   sits at wght 270 — extra-light. We borrow that as the display weight and
   pair it with regular text weight, deliberately. */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@200..900&family=Geist+Mono:wght@300..700&display=swap');

:root {
  /* Type families */
  --font-sans: 'Geist', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale — paired sizes. Each step is a pair: display & body.
     We rely on extra-light (270) for display, regular (400) for text. */
  --text-2xs: 11px;       /* meta, captions */
  --text-xs:  12px;       /* labels */
  --text-sm:  14px;       /* secondary text */
  --text-base: 16px;      /* body */
  --text-md:  18px;       /* lead body */
  --text-lg:  22px;       /* sub-display */
  --text-xl:  32px;       /* H3 */
  --text-2xl: 44px;       /* H2 */
  --text-3xl: 64px;       /* H1 */
  --text-4xl: 96px;       /* hero */

  /* Weights — use only these three. The 270 thin echoes the wordmark. */
  --wt-thin: 270;
  --wt-regular: 400;
  --wt-medium: 500;

  /* Line heights */
  --lh-tight: 1.04;
  --lh-snug: 1.18;
  --lh-normal: 1.45;
  --lh-relaxed: 1.6;

  /* Letter spacing — tight on display, neutral on body, open on micro labels */
  --tracking-display: -0.025em;
  --tracking-body: -0.005em;
  --tracking-label: 0.06em;
  --tracking-mono: 0;

  /* --- COLOR ------------------------------------------------------------- */
  /* The duo: one ink (deep cool near-black), one accent (warm signal red).
     Everything else is a tonal step of paper or ink. No gradients. No tints
     that drift toward extra hues. */

  /* Ink — primary text & UI. Cool charcoal, not pure black. */
  --ink-1000: oklch(0.16 0.012 260);  /* near-black, body text */
  --ink-900:  oklch(0.24 0.011 260);
  --ink-700:  oklch(0.42 0.009 260);  /* secondary text */
  --ink-500:  oklch(0.58 0.007 260);  /* tertiary, captions */
  --ink-300:  oklch(0.76 0.005 260);  /* disabled, subtle icons */
  --ink-200:  oklch(0.86 0.004 260);  /* dividers, strong */
  --ink-100:  oklch(0.92 0.003 260);  /* dividers, default */
  --ink-50:   oklch(0.96 0.002 260);  /* surface, hover */

  /* Paper — backgrounds. Warm off-white, never pure #fff. */
  --paper:     oklch(0.985 0.004 80); /* canvas */
  --paper-alt: oklch(0.965 0.005 80); /* alt panel */
  --paper-deep: oklch(0.94 0.006 80); /* hover surface, code blocks */

  /* Accent — the second of the duo. A warm signal red, restrained. */
  --accent:        oklch(0.62 0.18 28);   /* primary accent */
  --accent-hover:  oklch(0.56 0.19 28);   /* hover */
  --accent-press:  oklch(0.50 0.19 28);   /* active */
  --accent-soft:   oklch(0.94 0.04 28);   /* tinted background */
  --accent-on:     oklch(0.99 0.005 80);  /* text on accent */

  /* Status — derived, used sparingly. Stay in the same chroma family as accent
     so the whole system reads as one piece. */
  --ok:    oklch(0.62 0.13 155);
  --warn:  oklch(0.74 0.14 75);
  --crit:  oklch(0.55 0.20 28);  /* same hue family as accent */
  --info:  oklch(0.58 0.10 240);

  /* --- SEMANTIC ROLES ---------------------------------------------------- */
  --bg:        var(--paper);
  --bg-alt:    var(--paper-alt);
  --bg-deep:   var(--paper-deep);
  --fg:        var(--ink-1000);
  --fg-muted:  var(--ink-700);
  --fg-subtle: var(--ink-500);
  --border:    var(--ink-100);
  --border-strong: var(--ink-200);
  --link:      var(--accent);

  /* --- SPACE ------------------------------------------------------------- */
  /* 4px base. Pairs of pairs: each step doubles, with halves between. */
  --space-0: 0;
  --space-px: 1px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --space-40: 160px;

  /* --- RADIUS ------------------------------------------------------------ */
  /* Restrained. No pill buttons. The system is editorial, not friendly-tech. */
  --radius-none: 0;
  --radius-xs: 2px;       /* tags, micro */
  --radius-sm: 4px;       /* inputs, buttons */
  --radius-md: 6px;       /* cards */
  --radius-lg: 10px;      /* modals, panels */
  --radius-full: 9999px;  /* avatars, dots */

  /* --- BORDERS ----------------------------------------------------------- */
  --border-w: 1px;
  --border-w-2: 2px;

  /* --- SHADOWS ----------------------------------------------------------- */
  /* Used very sparingly — the system prefers borders to shadows. */
  --shadow-xs: 0 1px 2px oklch(0.16 0.012 260 / 0.04);
  --shadow-sm: 0 2px 4px oklch(0.16 0.012 260 / 0.04), 0 1px 2px oklch(0.16 0.012 260 / 0.06);
  --shadow-md: 0 8px 24px -8px oklch(0.16 0.012 260 / 0.10), 0 2px 4px oklch(0.16 0.012 260 / 0.04);
  --shadow-lg: 0 24px 48px -12px oklch(0.16 0.012 260 / 0.14);

  /* --- MOTION ------------------------------------------------------------ */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 120ms;
  --duration: 200ms;
  --duration-slow: 320ms;

  /* --- LAYOUT ------------------------------------------------------------ */
  --container-narrow: 640px;
  --container: 880px;
  --container-wide: 1200px;
  --container-full: 1440px;

  /* Theme — native form controls, scrollbars, etc. follow this. */
  color-scheme: light;
}

/* ============================================================================
   Dark theme
   ----------------------------------------------------------------------------
   The same duo, after dark. We invert the ink ramp (light text now climbs from
   --ink-50 up to --ink-1000) and sink paper into a deep cool charcoal, while
   keeping the warm accent — nudged a touch brighter so it still signals against
   the darker field. Semantic roles and components reference these raw tokens
   through var(), so redefining the ramp here cascades everywhere for free.

   Applied when the document is explicitly dark, or when the OS prefers dark and
   the user hasn't pinned light. A tiny inline script sets data-theme before
   paint, so there is no flash.
   ============================================================================ */
:root[data-theme="dark"] {
  /* Ink — now the light-on-dark ramp. --ink-1000 is the brightest text. */
  --ink-1000: oklch(0.95 0.004 260);  /* body text */
  --ink-900:  oklch(0.88 0.006 260);
  --ink-700:  oklch(0.72 0.007 260);  /* secondary text */
  --ink-500:  oklch(0.60 0.008 260);  /* tertiary, captions */
  --ink-300:  oklch(0.46 0.009 260);  /* disabled, subtle icons */
  --ink-200:  oklch(0.36 0.010 260);  /* dividers, strong */
  --ink-100:  oklch(0.30 0.010 260);  /* dividers, default */
  --ink-50:   oklch(0.26 0.010 260);  /* surface, hover */

  /* Paper — deep cool charcoal, never pure black. */
  --paper:      oklch(0.215 0.008 260); /* canvas */
  --paper-alt:  oklch(0.255 0.009 260); /* alt panel */
  --paper-deep: oklch(0.295 0.010 260); /* hover surface, code blocks */

  /* Accent — same warm red, lifted for the darker field. */
  --accent:        oklch(0.68 0.19 28);
  --accent-hover:  oklch(0.74 0.18 28);   /* brighten on hover in the dark */
  --accent-press:  oklch(0.62 0.19 28);
  --accent-soft:   oklch(0.30 0.07 28);   /* tinted background */
  --accent-on:     oklch(0.99 0.005 80);  /* text on accent */

  /* Status — same hues, nudged lighter so they read on dark. */
  --ok:    oklch(0.70 0.14 155);
  --warn:  oklch(0.80 0.14 75);
  --crit:  oklch(0.66 0.20 28);
  --info:  oklch(0.68 0.11 240);

  /* Shadows — deeper and blacker; borders still carry most of the weight. */
  --shadow-xs: 0 1px 2px oklch(0 0 0 / 0.30);
  --shadow-sm: 0 2px 4px oklch(0 0 0 / 0.30), 0 1px 2px oklch(0 0 0 / 0.40);
  --shadow-md: 0 8px 24px -8px oklch(0 0 0 / 0.50), 0 2px 4px oklch(0 0 0 / 0.30);
  --shadow-lg: 0 24px 48px -12px oklch(0 0 0 / 0.60);

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  /* Follow the OS unless the user has pinned light. The values above live on
     [data-theme="dark"]; mirror the switch by tagging :root so they apply. */
  :root:not([data-theme="light"]) {
    --ink-1000: oklch(0.95 0.004 260);
    --ink-900:  oklch(0.88 0.006 260);
    --ink-700:  oklch(0.72 0.007 260);
    --ink-500:  oklch(0.60 0.008 260);
    --ink-300:  oklch(0.46 0.009 260);
    --ink-200:  oklch(0.36 0.010 260);
    --ink-100:  oklch(0.30 0.010 260);
    --ink-50:   oklch(0.26 0.010 260);

    --paper:      oklch(0.215 0.008 260);
    --paper-alt:  oklch(0.255 0.009 260);
    --paper-deep: oklch(0.295 0.010 260);

    --accent:        oklch(0.68 0.19 28);
    --accent-hover:  oklch(0.74 0.18 28);
    --accent-press:  oklch(0.62 0.19 28);
    --accent-soft:   oklch(0.30 0.07 28);
    --accent-on:     oklch(0.99 0.005 80);

    --ok:    oklch(0.70 0.14 155);
    --warn:  oklch(0.80 0.14 75);
    --crit:  oklch(0.66 0.20 28);
    --info:  oklch(0.68 0.11 240);

    --shadow-xs: 0 1px 2px oklch(0 0 0 / 0.30);
    --shadow-sm: 0 2px 4px oklch(0 0 0 / 0.30), 0 1px 2px oklch(0 0 0 / 0.40);
    --shadow-md: 0 8px 24px -8px oklch(0 0 0 / 0.50), 0 2px 4px oklch(0 0 0 / 0.30);
    --shadow-lg: 0 24px 48px -12px oklch(0 0 0 / 0.60);

    color-scheme: dark;
  }
}

/* --- BASE ---------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11"; /* Geist tabular alts */
}

html {
  transition: background-color var(--duration) var(--ease-out),
              color var(--duration) var(--ease-out);
}

body {
  margin: 0;
  letter-spacing: var(--tracking-body);
}

/* Respect users who'd rather not see the cross-fade between themes. */
@media (prefers-reduced-motion: reduce) {
  html { transition: none; }
}

/* --- TYPE UTILITIES ------------------------------------------------------ */
.t-display-xl,
.t-display-lg,
.t-display-md,
.t-display-sm {
  font-weight: var(--wt-thin);
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-tight);
  color: var(--fg);
}
.t-display-xl { font-size: var(--text-4xl); }
.t-display-lg { font-size: var(--text-3xl); }
.t-display-md { font-size: var(--text-2xl); }
.t-display-sm { font-size: var(--text-xl); line-height: var(--lh-snug); }

.t-lead {
  font-size: var(--text-md);
  font-weight: var(--wt-regular);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
  letter-spacing: var(--tracking-body);
}

.t-body {
  font-size: var(--text-base);
  font-weight: var(--wt-regular);
  line-height: var(--lh-normal);
  color: var(--fg);
}

.t-small {
  font-size: var(--text-sm);
  color: var(--fg-muted);
  line-height: var(--lh-normal);
}

.t-meta {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--wt-regular);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-subtle);
}

.t-mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
  letter-spacing: var(--tracking-mono);
}

/* Reset native heading styles so .t-display-* utilities are the only path. */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: inherit;
}

p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img, svg { display: block; max-width: 100%; }