/* ===========================================================================
   Cratelog design tokens
   Ported verbatim from the Cratelog design system
   (_ds/cratelog-design-system-57be1c52-.../tokens/*.css), flattened into one
   file so the page ships a single token request.

   Layer order matches the source: fonts, colors, theme-dark, typography,
   spacing, radius, elevation, motion.
   =========================================================================== */

/* --- fonts.css ------------------------------------------------------------
   Cratelog runs on ONE typeface. Outfit is a stand-in for the geometric sans
   in the source theme sheets. Swap the family here if the real font files
   arrive - nothing else needs to change. */
:root {
  --font-core: "Lato", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-num: "Lato", ui-sans-serif, system-ui, sans-serif;
}

/* --- colors.css -----------------------------------------------------------
   The brand is monochrome: sable, a warm near-black. No brand hue competes
   with status. Green = success only, amber = warning only, wine = danger only.
   Box + cover accents are deliberately drawn from NON-semantic hues (blues,
   violets, plum, stone) so an identity colour can never be misread as status. */
:root {
  /* Paper: warm off-white neutrals, light theme surfaces. */
  --paper-50: #fffdfa;
  --paper-100: #fbf8f3;
  --paper-200: #f6f2ec;
  --paper-300: #efeae2;
  --paper-400: #e6e0d6;
  --paper-500: #d8d1c5;
  --paper-600: #c0b8ab;

  /* Ink: warm near-black text, never pure black. */
  --ink-900: #1c1a17;
  --ink-800: #46403a;
  --ink-700: #5f5750;
  --ink-600: #7c736a;
  --ink-500: #9b9288;

  /* Bark: dark theme surfaces. */
  --bark-900: #14120e;
  --bark-800: #191612;
  --bark-700: #221e19;
  --bark-600: #2d2823;
  --bark-500: #3b352e;

  /* Bone: dark theme text. */
  --bone-100: #f4efe7;
  --bone-300: #c5bcb0;
  --bone-400: #aba296;
  --bone-500: #8b8278;

  /* Sable: the brand. A warm near-black - deeper and warmer than body ink.
     On dark it inverts to bone, so primary actions are always the
     highest-contrast thing. */
  --sable-800: #17130e;
  --sable-700: #201b15;
  --sable-600: #2b251d;
  --sable-500: #3d352b;
  --sable-tint: #ece7dd;
  --sable-tint-dark: #302a23;

  /* Semantics - one hue each, no overlaps, status only. */
  --leaf-700: #2d6b3f;
  --leaf-400: #7fc48f;
  --leaf-tint: #e8f1ea;
  --leaf-tint-dark: #17301f;
  --amber-700: #8a6410;
  --amber-400: #dbb35c;
  --amber-tint: #f7eed9;
  --amber-tint-dark: #33270f;
  --wine-700: #96241f;
  --wine-400: #e58d84;
  --wine-tint: #f7e6e2;
  --wine-tint-dark: #38201d;

  /* Box + cover accents - per-subscription and per-book identity.
     No greens, no ambers, no reds: identity must never read as status. */
  --box-slate: #3c4a52;
  --box-ink: #2b3242;
  --box-indigo: #3d4780;
  --box-violet: #5f4a8c;
  --box-plum: #7c3f68;
  --box-steel: #2f6a8c;
  --box-stone: #6b6157;

  /* Legacy accent names, remapped onto the non-semantic set. */
  --box-cobalt: var(--box-indigo);
  --box-forest: var(--box-ink);
  --box-wine: var(--box-plum);
  --box-navy: var(--box-slate);
  --box-olive: var(--box-stone);
  --box-clay: var(--box-stone);

  /* ---- Semantic aliases (light is the default theme) ---- */
  --bg-app: var(--paper-200);
  --surface-card: var(--paper-50);
  --surface-sunken: var(--paper-100);
  --surface-muted: var(--paper-300);
  --surface-nav: var(--paper-50);
  --border-hairline: var(--paper-400);
  --border-soft: var(--paper-300);
  --border-strong: var(--paper-600);

  --text-primary: var(--ink-900);
  --text-secondary: var(--ink-700);
  --text-tertiary: var(--ink-500);
  --text-label: var(--ink-600);
  --text-on-brand: var(--paper-50);
  --text-link: var(--sable-600);

  --brand: var(--sable-600);
  --brand-hover: var(--sable-800);
  --brand-quiet: var(--sable-tint);
  --brand-on-quiet: var(--sable-700);

  --success: var(--leaf-700);
  --success-quiet: var(--leaf-tint);
  --warning: var(--amber-700);
  --warning-quiet: var(--amber-tint);
  --danger: var(--wine-700);
  --danger-quiet: var(--wine-tint);

  /* Legacy aliases - attention folded into warning, info into the brand. */
  --attention: var(--warning);
  --attention-quiet: var(--warning-quiet);
  --info: var(--brand);
  --info-quiet: var(--brand-quiet);

  /* Raised from the design's 45%: composited over paper-50 that landed at
     2.70:1, under the 3:1 WCAG 2.2 requires of a focus indicator (SC 1.4.11,
     2.4.11). 70% clears it. See README, "Where this differs from the design". */
  --focus-ring: color-mix(in oklab, var(--sable-600) 70%, transparent);
}

/* --- theme-dark.css -------------------------------------------------------
   Apply data-theme="dark" to <html> or any container. Only the semantic
   aliases flip - component code never changes. The monochrome brand inverts:
   bone fills, bark text. */
[data-theme="dark"] {
  --bg-app: var(--bark-900);
  --surface-card: var(--bark-700);
  --surface-sunken: var(--bark-800);
  --surface-muted: var(--bark-600);
  --surface-nav: var(--bark-800);
  --border-hairline: var(--bark-500);
  --border-soft: var(--bark-600);
  --border-strong: #4a433a;

  --text-primary: var(--bone-100);
  --text-secondary: var(--bone-300);
  --text-tertiary: var(--bone-500);
  --text-label: var(--bone-300);
  --text-on-brand: var(--bark-900);
  --text-link: var(--bone-100);

  --brand: var(--bone-100);
  --brand-hover: #ffffff;
  --brand-quiet: var(--sable-tint-dark);
  --brand-on-quiet: var(--bone-100);

  --success: var(--leaf-400);
  --success-quiet: var(--leaf-tint-dark);
  --warning: var(--amber-400);
  --warning-quiet: var(--amber-tint-dark);
  --danger: var(--wine-400);
  --danger-quiet: var(--wine-tint-dark);

  --shadow-subtle: none;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-modal: 0 10px 34px -10px rgba(0, 0, 0, 0.7);

  --focus-ring: color-mix(in oklab, var(--bone-100) 55%, transparent);
}

/* --- typography.css -------------------------------------------------------
   One family. Labels are sentence case - the tracked caps treatment is gone. */
:root {
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --text-display-size: 30px;
  --text-display-line: 1.12;
  --text-display-weight: var(--weight-medium);
  --text-display-track: -0.03em;

  --text-title-size: 22px;
  --text-title-line: 1.25;
  --text-title-weight: var(--weight-semibold);
  --text-title-track: -0.02em;

  --text-heading-size: 17px;
  --text-heading-line: 1.3;
  --text-heading-weight: var(--weight-semibold);
  --text-heading-track: -0.015em;

  --text-body-size: 15px;
  --text-body-line: 1.45;
  --text-body-weight: var(--weight-regular);

  --text-meta-size: 13px;
  --text-meta-line: 1.4;
  --text-meta-weight: var(--weight-regular);

  --text-chip-size: 12px;
  --text-chip-line: 1;
  --text-chip-weight: var(--weight-semibold);

  --text-caption-size: 11.5px;
  --text-caption-line: 1.3;

  --text-label-size: 13px;
  --text-label-line: 1.2;
  --text-label-weight: var(--weight-semibold);
  --text-label-track: -0.01em;

  --text-figure-size: 26px;
  --text-figure-line: 1.05;
  --text-figure-weight: var(--weight-semibold);
  --text-figure-track: -0.025em;

  --text-figure-sm-size: 19px;
  --text-figure-sm-weight: var(--weight-semibold);
}

/* --- spacing.css ----------------------------------------------------------
   2px base, 4px rhythm. --space-4 (16px) is the phone gutter. */
:root {
  --space-05: 2px;
  --space-1: 4px;
  --space-15: 6px;
  --space-2: 8px;
  --space-25: 10px;
  --space-3: 12px;
  --space-35: 14px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  --gutter-screen: 16px;
  --gap-card: 10px;
  --gap-section: 22px;
  --pad-card: 14px;
  --tap-min: 44px;
}

/* --- radius.css ---------------------------------------------------------- */
:root {
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --radius-card: var(--radius-lg);
  --radius-tile: var(--radius-md);
  --radius-chip: var(--radius-pill);
  --radius-sheet: var(--radius-xl);
  --radius-phone: 44px;
}

/* --- elevation.css --------------------------------------------------------
   Flat by default. Surfaces separate by tone, not by border or shadow.
   Only things that genuinely float get a shadow. */
:root {
  --shadow-subtle: none;
  --shadow-card: 0 1px 2px rgba(28, 26, 23, 0.04);
  --shadow-raised: 0 2px 8px -2px rgba(28, 26, 23, 0.1);
  --shadow-modal: 0 10px 34px -10px rgba(28, 26, 23, 0.22);
  --shadow-inset-hairline: inset 0 -1px 0 rgba(28, 26, 23, 0.05);

  --border-width: 1px;
  --border-card: 1px solid var(--border-soft);
}

/* --- motion.css -----------------------------------------------------------
   Quiet motion: short, eased-out, no bounce, no spring. */
:root {
  --dur-instant: 90ms;
  --dur-fast: 140ms;
  --dur-base: 200ms;
  --dur-slow: 280ms;
  --dur-sheet: 320ms;

  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);

  --press-scale: 0.97;
}