/* toge-tokens.css — design tokens hand-extracted from the Toge Design System.
 * Source of truth: toge-ds-components/src/style.css (v2.2.0), light mode only.
 *   - Primitive palettes:   src/style.css:70-205   (@theme --color-*)
 *   - Semantic tokens:      src/style.css:482-673  (@layer base :root)
 *   - Type/leading/tracking: src/style.css:360-399 (@theme)
 *   - Page gradient:        src/style.css:483-492
 * Variable names are kept VERBATIM from toge so future re-syncs are a
 * mechanical diff against the source file. No build step.
 */

/* ── Fonts (self-hosted Geist, OFL — weights 400/500/600, latin subset) ───── */
@font-face {
  font-family: 'Geist';
  src: url('/static/fonts/geist-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('/static/fonts/geist-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('/static/fonts/geist-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ── Primitives — src/style.css:70-205 (subset used by this app) ─────────── */
:root {
  --color-white: #ffffff;

  /* neutral — achromatic gray; disabled states only */
  --color-neutral-100: #f1f2f3;
  --color-neutral-200: #dbdbdd;
  --color-neutral-400: #989898;
  --color-neutral-500: #7c7c7c;

  /* mushroom — primary UI warm gray (surfaces/text/borders) */
  --color-mushroom-50: #f7f8f8;
  --color-mushroom-100: #e6eaea;
  --color-mushroom-200: #d9dede;
  --color-mushroom-300: #b8c1c0;
  --color-mushroom-400: #919f9d;
  --color-mushroom-500: #738482;
  --color-mushroom-600: #5d6c6b;
  --color-mushroom-700: #4c5857;
  --color-mushroom-800: #414b4b;
  --color-mushroom-900: #394141;
  --color-mushroom-950: #262b2b;

  /* kangkong — brand + success green */
  --color-kangkong-50: #f0fdf4;
  --color-kangkong-100: #dcfce6;
  --color-kangkong-150: #ccfada;
  --color-kangkong-200: #bbf7ce;
  --color-kangkong-300: #86efa8;
  --color-kangkong-400: #4ade7b;
  --color-kangkong-600: #17ad49;
  --color-kangkong-700: #158039;
  --color-kangkong-800: #166531;
  --color-kangkong-900: #14532b;
  --color-kangkong-950: #052e15;

  /* tomato — danger */
  --color-tomato-100: #fee2e3;
  --color-tomato-150: #fed7d9;
  --color-tomato-200: #fdcbce;
  --color-tomato-600: #da2f38;
  --color-tomato-700: #b61f27;
  --color-tomato-800: #971d23;

  /* carrot — caution */
  --color-carrot-100: #fff4d3;
  --color-carrot-150: #ffedbc;
  --color-carrot-200: #ffe5a5;
  --color-carrot-500: #ff970a;
  --color-carrot-800: #a1470b;

  /* mango — pending */
  --color-mango-100: #fffbc5;
  --color-mango-150: #fffaa5;
  --color-mango-200: #fff885;
  --color-mango-500: #ffbf00;
  --color-mango-800: #985008;

  /* wintermelon — accent teal */
  --color-wintermelon-100: #cefbff;
  --color-wintermelon-200: #a3f3fe;
  --color-wintermelon-600: #0592b5;
  --color-wintermelon-700: #0c7492;

  /* blueberry — information */
  --color-blueberry-100: #d8ebff;
  --color-blueberry-150: #c9e4ff;
  --color-blueberry-600: #1679fa;
  --color-blueberry-800: #1356ba;

  /* ubas — agent purple */
  --color-ubas-100: #eee9fe;
  --color-ubas-600: #8139ee;
  --color-ubas-700: #7227da;
}

/* ── Semantic tokens — src/style.css:482-673 (verbatim names) ────────────── */
:root {
  /* Page background gradient (toge canonical page treatment) */
  --page-gradient:
    radial-gradient(circle at top left, rgba(50, 206, 19, 0.12), transparent 34%),
    radial-gradient(circle at top right, rgba(129, 57, 238, 0.05), transparent 24%),
    linear-gradient(
      180deg,
      rgba(250, 252, 248, 1) 0%,
      rgba(253, 254, 253, 1) 42%,
      rgba(245, 250, 243, 1) 100%
    );

  /* Surfaces */
  --surface-white: var(--color-white);
  --surface-gray: var(--color-mushroom-50);
  --surface: var(--color-mushroom-50);
  --surface-adaptive: color-mix(in srgb, var(--color-mushroom-950) 6%, transparent);
  --surface-hover: color-mix(in srgb, var(--color-mushroom-950) 8%, transparent);
  --surface-pressed: color-mix(in srgb, var(--color-mushroom-950) 12%, transparent);
  --surface-disabled: var(--color-neutral-100);
  --surface-inverted: var(--color-mushroom-950);
  --surface-inverted-hover: var(--color-mushroom-900);
  --surface-inverted-pressed: var(--color-mushroom-800);
  --surface-active: var(--color-kangkong-100);
  --surface-active-soft: var(--color-kangkong-50);

  /* Text */
  --text-strong: var(--color-mushroom-950);
  --text-supporting: var(--color-mushroom-500);
  --text-base: var(--color-mushroom-600);
  --text-weak: var(--color-mushroom-400);
  --text-disabled: var(--color-neutral-400);
  --text-inverted: var(--color-neutral-50, #ffffff);
  --text-inverted-base: var(--color-mushroom-200);
  --text-inverted-weak: var(--color-mushroom-400);

  /* Border */
  --border-strong: var(--color-mushroom-500);
  --border-base: var(--color-mushroom-300);
  --border-base-hover: var(--color-mushroom-400);
  --border-weak: var(--color-mushroom-200);

  /* Brand (kangkong) */
  --brand: var(--color-kangkong-700);
  --brand-hover: var(--color-kangkong-800);
  --brand-pressed: var(--color-kangkong-900);
  --brand-subtle: var(--color-kangkong-100);
  --brand-subtle-hover: var(--color-kangkong-200);
  --brand-text: var(--color-kangkong-800);
  --brand-text-hover: var(--color-kangkong-900);

  /* Success (kangkong) */
  --success: var(--color-kangkong-600);
  --success-text: var(--color-kangkong-700);
  --success-subtle: var(--color-kangkong-100);
  --success-subtle-hover: var(--color-kangkong-200);
  --success-status: var(--color-kangkong-150);

  /* Information (blueberry) */
  --information: var(--color-blueberry-600);
  --information-text: var(--color-blueberry-800);
  --information-subtle: var(--color-blueberry-100);
  --information-status: var(--color-blueberry-150);

  /* Danger (tomato) */
  --danger: var(--color-tomato-600);
  --danger-hover: var(--color-tomato-700);
  --danger-text: var(--color-tomato-700);
  --danger-subtle: var(--color-tomato-100);
  --danger-subtle-hover: var(--color-tomato-200);
  --danger-status: var(--color-tomato-150);

  /* Pending (mango) */
  --pending: var(--color-mango-500);
  --pending-text: var(--color-mango-800);
  --pending-subtle: var(--color-mango-100);
  --pending-subtle-hover: var(--color-mango-200);
  --pending-status: var(--color-mango-150);

  /* Caution (carrot) */
  --caution: var(--color-carrot-500);
  --caution-text: var(--color-carrot-800);
  --caution-subtle: var(--color-carrot-100);
  --caution-subtle-hover: var(--color-carrot-200);
  --caution-status: var(--color-carrot-150);

  /* Accent (wintermelon) */
  --accent-fill: var(--color-wintermelon-600);
  --accent-text: var(--color-wintermelon-700);
  --accent-subtle: var(--color-wintermelon-100);
  --accent-subtle-hover: var(--color-wintermelon-200);

  /* Agent (ubas) */
  --agent: var(--color-ubas-600);
  --agent-text: var(--color-ubas-700);
  --agent-subtle: var(--color-ubas-100);

  /* Control (toggles/checkbox track) */
  --control: var(--color-mushroom-200);
  --control-hover: var(--color-mushroom-300);
  --control-pressed: var(--color-mushroom-400);

  /* On-fill text */
  --on-brand: #ffffff;
  --on-danger: #ffffff;

  /* Neutral button/badge (mushroom) */
  --neutral: var(--color-mushroom-100);
  --neutral-hover: var(--color-mushroom-200);
  --neutral-border: var(--color-mushroom-300);
  --neutral-text: var(--color-mushroom-700);
}

/* ── Radius / typography / motion — src/style.css:360-399, 404-407 ───────── */
:root {
  /* Radius (toge: buttons/inputs 8, md 10, cards 18-22) */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-xl: 22px;

  /* Font families */
  --font-body: 'Geist', ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', monospace;

  /* Font sizes (1rem = 16px). --text-300 (14px) is the default body size. */
  --text-200: 0.75rem;   /* 12px — captions, labels */
  --text-300: 0.875rem;  /* 14px — default body */
  --text-400: 1rem;      /* 16px */
  --text-500: 1.125rem;  /* 18px */
  --text-600: 1.25rem;   /* 20px */
  --text-700: 1.5rem;    /* 24px */
  --text-800: 1.875rem;  /* 30px */

  /* Line heights */
  --leading-200: 1.1;
  --leading-300: 1.25;
  --leading-400: 1.375;
  --leading-500: 1.5;
  --leading-600: 1.625;

  /* Letter spacing */
  --tracking-densest: -0.05em;
  --tracking-denser: -0.025em;
  --tracking-dense: -0.015em;
  --tracking-normal: 0em;
  --tracking-wide: 0.025em;
  --tracking-widest: 0.1em;

  /* Motion — toge standard interaction: duration-150 ease-in-out */
  --duration: 150ms;
  --easing: ease-in-out;
}