/* ----------------------------------------------------------------------------
   Ristra design tokens.
   Generated by scripts/gen-tokens.mjs — DO NOT EDIT. Edit tokens/tokens.source.mjs and re-run.
   Source of truth for app.getristra.com, getristra.com, and design.getristra.com.
   ------------------------------------------------------------------------- */

:root {
  /* Terra ramp — terra-600 = terra anchor */
  --terra-975: #1e0100;
  --terra-950: #380300;
  --terra-900: #5a0a00;
  --terra-800: #821300;
  --terra-700: #a71c00;
  --terra-600: #d7391d;
  --terra-500: #e0563d;
  --terra-400: #f37860;
  --terra-300: #ff9c88;
  --terra-200: #ffc4b7;
  --terra-100: #ffe0d9;
  --terra-50: #fff4f2;

  /* Sweet ramp — sweet-400 = sweet anchor */
  --sweet-975: #1a0400;
  --sweet-950: #320e00;
  --sweet-900: #4f1b00;
  --sweet-800: #742b00;
  --sweet-700: #963a00;
  --sweet-600: #b94a00;
  --sweet-500: #da5e16;
  --sweet-400: #f66e24;
  --sweet-300: #ff9e73;
  --sweet-200: #ffc5ad;
  --sweet-100: #ffe1d4;
  --sweet-50: #fff4f0;

  /* Chili ramp — chili-600 = chili anchor */
  --chili-975: #1f0000;
  --chili-950: #3b0000;
  --chili-900: #5d0000;
  --chili-800: #860000;
  --chili-700: #ad0000;
  --chili-600: #e30000;
  --chili-500: #ed4233;
  --chili-400: #ff6c5a;
  --chili-300: #ff9c8d;
  --chili-200: #ffc4ba;
  --chili-100: #ffe0da;
  --chili-50: #fff4f2;

  /* Ochre ramp — ochre-300 = ochre anchor */
  --ochre-975: #140800;
  --ochre-950: #291500;
  --ochre-900: #432600;
  --ochre-800: #633a00;
  --ochre-700: #804d00;
  --ochre-600: #9f6100;
  --ochre-500: #bf7600;
  --ochre-400: #df8c10;
  --ochre-300: #f49a19;
  --ochre-200: #ffc98f;
  --ochre-100: #ffe2c5;
  --ochre-50: #fff5eb;

  /* Sage ramp — sage-500 = sage anchor */
  --sage-975: #050e02;
  --sage-950: #131f0b;
  --sage-900: #24331b;
  --sage-800: #3a4b2f;
  --sage-700: #4e6242;
  --sage-600: #637956;
  --sage-500: #809971;
  --sage-400: #93aa86;
  --sage-300: #aec2a3;
  --sage-200: #cadac1;
  --sage-100: #e0edd8;
  --sage-50: #f1faeb;

  /* Turquoise ramp — turquoise-300 = turquoise-lt anchor, turquoise-500 = turquoise-dk anchor */
  --turquoise-975: #000f0a;
  --turquoise-950: #002119;
  --turquoise-900: #00372c;
  --turquoise-800: #005242;
  --turquoise-700: #006b57;
  --turquoise-600: #00856d;
  --turquoise-500: #0a9c81;
  --turquoise-400: #17bb9d;
  --turquoise-300: #20dbba;
  --turquoise-200: #79edd2;
  --turquoise-100: #acfae6;
  --turquoise-50: #e0fff6;

  /* Earth ramp — earth-100 = sand anchor, earth-950 = earth anchor */
  --earth-975: #0f0a06;
  --earth-950: #231a11;
  --earth-900: #362c21;
  --earth-800: #4e4337;
  --earth-700: #65584b;
  --earth-600: #7c6f60;
  --earth-500: #958776;
  --earth-400: #ae9f8c;
  --earth-300: #c8b8a4;
  --earth-200: #e2d2bb;
  --earth-100: #ffeed6;
  --earth-50: #fcf6ed;

  /* Semantic tokens */
  --bg: var(--earth-50);
  --surface: #ffffff;
  --surface-sunken: var(--earth-100);
  --border: var(--earth-200);
  --text: var(--earth-900);
  --text-muted: var(--earth-600);
  --text-faint: var(--earth-400);
  --accent: var(--terra-600);
  --accent-strong: var(--terra-700);
  --on-accent: #ffffff;
  --title: var(--turquoise-500);
  --link: var(--turquoise-700);
  --pill-bg: var(--earth-100);
  --status-incart: var(--turquoise-500);
  --status-bought: var(--text-faint);
  --status-unavailable: var(--ochre-700);
  --trip-wash: var(--sage-50);
  --trip-border: var(--sage-200);
  --trip-text: var(--sage-700);
  --trip-dot: var(--sage-500);

  /* Safe-area insets (resolve to 0 when not applicable) */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  /* Dimensions */
  --radius: 14px;
  --radius-sm: 9px;
  --radius-pill: 999px;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 12px;
  --space-6: 16px;
  --space-7: 20px;
  --space-8: 24px;
  --space-9: 32px;
  --space-10: 40px;
  --space-11: 48px;
  --space-12: 64px;
  --shadow: 0 1px 3px rgba(35, 26, 17, 0.09), 0 6px 18px rgba(35, 26, 17, 0.07);

  /* Typography */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Solitreo', cursive;
  --font-tagline: 'Jua', sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --text-xs: 12px;
  --leading-xs: 1.45;
  --text-sm: 14px;
  --leading-sm: 1.45;
  --text-base: 16px;
  --leading-base: 1.5;
  --text-lg: 18px;
  --leading-lg: 1.45;
  --text-xl: 22px;
  --leading-xl: 1.3;
  --text-2xl: 28px;
  --leading-2xl: 1.2;
  --text-3xl: 36px;
  --leading-3xl: 1.15;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Motion */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.25, 1);

  color-scheme: light;
}

/* Dark theme. Resolve the user preference (system/light/dark) to a concrete
   data-theme="light|dark" on <html>; this block covers system-dark and an
   explicit dark choice alike. */
:root[data-theme="dark"] {
  --bg: var(--earth-975);
  --surface: var(--earth-950);
  --surface-sunken: #18130d;
  --border: #3f362d;
  --text: var(--earth-100);
  --text-muted: var(--earth-300);
  --text-faint: var(--earth-600);
  --accent: var(--terra-400);
  --accent-strong: var(--terra-300);
  --on-accent: var(--earth-975);
  --title: var(--turquoise-300);
  --link: var(--turquoise-300);
  --pill-bg: #352c23;
  --status-incart: var(--turquoise-400);
  --status-bought: var(--text-faint);
  --status-unavailable: var(--ochre-500);
  --trip-wash: var(--sage-900);
  --trip-border: var(--sage-800);
  --trip-text: var(--sage-300);
  --trip-dot: var(--sage-400);
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 6px 18px rgba(0, 0, 0, 0.38);

  color-scheme: dark;
}