/*
 * Yaseen design tokens.
 *
 * Copied one-for-one from the Yaseen design system's `tokens/*.css` (colors, spacing,
 * radius, typography, elevation, motion, theme-dark), concatenated into a single file
 * so the marketing site ships one stylesheet rather than seven. The names match the
 * design system's custom properties exactly, so a change there maps to a change here
 * without translation — the same contract `mobile/src/theme/tokens.ts` keeps for the app.
 */

:root {
  /* --- base ramps ------------------------------------------------------- */
  /* Sand: warm paper neutrals. Every Yaseen surface starts here, never pure white. */
  --sand-50: #fdfaf6;
  --sand-100: #f7f1e8;
  --sand-200: #efe5d8;
  --sand-300: #e2d4c2;
  --sand-400: #cdbba4;
  /* Clay: warm mid-neutrals for secondary text, dividers, disabled */
  --clay-400: #a9977f;
  --clay-500: #8a7862;
  --clay-600: #6b5c4a;
  /* Ink: green-shifted near-blacks */
  --ink-900: #1c2723;
  --ink-800: #26332e;
  --ink-700: #3a4a43;
  --ink-600: #55665e;
  /* Teal: the brand primary. Trust + clinic without going corporate blue. */
  --teal-50: #ebf4f1;
  --teal-100: #d3e8e1;
  --teal-200: #a6d0c4;
  --teal-400: #2f8d78;
  --teal-500: #1f7a66;
  --teal-600: #166352;
  --teal-700: #0f4c3f;
  /* Apricot: the single warm accent. Calls to action, streaks, highlights. */
  --apricot-100: #fce6d3;
  --apricot-300: #f3b682;
  --apricot-500: #e1834a;
  --apricot-600: #c26a35;
  /* Category hues: one per care-log domain. 100 for fills, 500 for marks. */
  --violet-100: #e9e2f4;
  --violet-500: #71539e;
  --amber-100: #f8e9c8;
  --amber-500: #c08a1c;
  --indigo-100: #dfe4f4;
  --indigo-500: #41589b;
  --rose-100: #f7dee3;
  --rose-500: #b94f66;
  --leaf-100: #dfebd3;
  --leaf-500: #5c8c45;
  /* Status */
  --success-500: #2c7a5b;
  --success-100: #d8ece2;
  --warning-500: #b8801a;
  --warning-100: #f8e9c8;
  --danger-500: #a94430;
  --danger-100: #f6ded8;
  --info-500: #2f6a96;
  --info-100: #dce9f2;

  /* --- semantic aliases ------------------------------------------------- */
  --text-primary: var(--ink-900);
  --text-secondary: var(--ink-600);
  --text-muted: var(--clay-500);
  --text-inverse: var(--sand-50);
  --text-brand: var(--teal-600);
  --text-link: var(--teal-600);
  --text-link-hover: var(--teal-700);
  --text-danger: var(--danger-500);

  --surface-page: var(--sand-100);
  --surface-card: #ffffff;
  --surface-raised: var(--sand-50);
  --surface-sunken: var(--sand-200);
  --surface-brand: var(--teal-600);
  --surface-brand-soft: var(--teal-50);
  --surface-accent-soft: var(--apricot-100);
  --surface-inverse: var(--ink-900);
  --surface-scrim: rgba(28, 39, 35, 0.44);

  --border-hairline: rgba(28, 39, 35, 0.08);
  --border-subtle: var(--sand-300);
  --border-strong: var(--clay-400);
  --border-brand: var(--teal-400);

  --brand-primary: var(--teal-600);
  --brand-primary-hover: var(--teal-700);
  --brand-primary-press: #0b3c31;
  --brand-accent: var(--apricot-500);
  --brand-accent-hover: var(--apricot-600);
  --on-brand: var(--sand-50);
  --on-accent: #ffffff;

  --focus-ring: var(--teal-400);
  --focus-ring-offset: var(--surface-page);

  /* Care-log categories, referenced by name in app + kits */
  --cat-meds: var(--violet-500);
  --cat-meds-soft: var(--violet-100);
  --cat-meals: var(--amber-500);
  --cat-meals-soft: var(--amber-100);
  --cat-sleep: var(--indigo-500);
  --cat-sleep-soft: var(--indigo-100);
  --cat-mood: var(--rose-500);
  --cat-mood-soft: var(--rose-100);
  --cat-activity: var(--leaf-500);
  --cat-activity-soft: var(--leaf-100);

  /* --- typography ------------------------------------------------------- */
  --font-ui: "Rubik", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Rubik", ui-sans-serif, system-ui, sans-serif;
  --font-editorial: "Newsreader", Georgia, "Times New Roman", serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 21px;
  --text-2xl: 26px;
  --text-3xl: 32px;
  --text-4xl: 42px;
  --text-5xl: 56px;

  --leading-tight: 1.12;
  --leading-snug: 1.28;
  --leading-normal: 1.5;
  --leading-relaxed: 1.62;

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  --tracking-tight: -0.02em;
  --tracking-snug: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-caps: 0.08em;

  /* composed roles */
  --type-title: 500 var(--text-2xl) / var(--leading-snug) var(--font-display);
  --type-heading: 500 var(--text-lg) / var(--leading-snug) var(--font-ui);
  --type-body: 400 var(--text-base) / var(--leading-relaxed) var(--font-ui);
  --type-label: 500 var(--text-sm) / var(--leading-normal) var(--font-ui);
  --type-caption: 400 var(--text-xs) / var(--leading-normal) var(--font-ui);
  --type-overline: 500 var(--text-2xs) / 1.2 var(--font-ui);
  --type-numeric: 500 var(--text-2xl) / 1.1 var(--font-mono);
  --type-quote: 300 var(--text-2xl) / var(--leading-snug) var(--font-editorial);

  /* --- spacing ---------------------------------------------------------- */
  --space-0: 0px;
  --space-px: 1px;
  --space-05: 2px;
  --space-1: 4px;
  --space-15: 6px;
  --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;

  --gutter-mobile: 20px;
  --gutter-desktop: 32px;
  --content-max: 1160px;
  --prose-max: 64ch;
  --card-pad: 16px;
  --card-pad-lg: 20px;
  --tap-min: 44px;

  /* --- radii ------------------------------------------------------------ */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 36px;
  --radius-pill: 999px;
  --radius-card: var(--radius-lg);
  --radius-control: var(--radius-sm);
  --radius-sheet: var(--radius-xl);
  --border-width: 1px;
  --border-width-strong: 1.5px;

  /* --- elevation -------------------------------------------------------- */
  /* Warm, low-contrast shadows: light comes from above, tinted with ink not black. */
  --shadow-hairline: 0 0 0 1px var(--border-hairline);
  --shadow-1: 0 1px 2px rgba(28, 39, 35, 0.06);
  --shadow-2: 0 2px 10px -3px rgba(28, 39, 35, 0.12), 0 1px 2px rgba(28, 39, 35, 0.05);
  --shadow-3: 0 14px 32px -12px rgba(28, 39, 35, 0.2), 0 2px 6px rgba(28, 39, 35, 0.06);
  --shadow-sheet: 0 -12px 40px -16px rgba(28, 39, 35, 0.28);
  --shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  --shadow-focus: 0 0 0 3px rgba(47, 141, 120, 0.32);
  --blur-sheet: saturate(1.1) blur(14px);

  /* --- motion ----------------------------------------------------------- */
  --dur-instant: 80ms;
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 320ms;
  --dur-sheet: 380ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.3, 1);
  --ease-in-out: cubic-bezier(0.5, 0, 0.3, 1);
  --ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-control: background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

/*
 * Night mode — a first-class mode for 3am logging, not an inversion. No pure white text,
 * no pure black ground: warm dark greens and a dimmed teal. All text/background pairings
 * here meet WCAG AA at body size.
 *
 * On the marketing site this is scoped to opt-in containers (`[data-theme="dark"]`) so a
 * single band can show the night palette without flipping the whole page.
 */
[data-theme="dark"] {
  --surface-page: #121816;
  --surface-card: #1b2321;
  --surface-raised: #222b28;
  --surface-sunken: #0d1211;
  --surface-brand: #14453a;
  --surface-brand-soft: #17322c;
  --surface-accent-soft: #33220f;
  --surface-inverse: #e7e3da;
  --surface-scrim: rgba(6, 10, 9, 0.66);

  --text-primary: #e7e3da;
  --text-secondary: #afb9b4;
  --text-muted: #8a968f;
  --text-inverse: #121816;
  --text-brand: #6fc0aa;
  --text-link: #6fc0aa;
  --text-link-hover: #8fd4c0;
  --text-danger: #ee9884;

  --border-hairline: rgba(231, 227, 218, 0.1);
  --border-subtle: #2c3532;
  --border-strong: #455049;
  --border-brand: #3fa189;

  --brand-primary: #3fa189;
  --brand-primary-hover: #4fb199;
  --brand-primary-press: #2e8c76;
  --brand-accent: #e8a46a;
  --brand-accent-hover: #f0b47f;
  --on-brand: #0e1412;
  --on-accent: #1b1208;

  --focus-ring: #5fbba4;
  --focus-ring-offset: var(--surface-page);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 2px 12px -3px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-3: 0 16px 36px -14px rgba(0, 0, 0, 0.7), 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-sheet: 0 -14px 44px -18px rgba(0, 0, 0, 0.72);
  --shadow-inset-top: inset 0 1px 0 rgba(231, 227, 218, 0.08);
  --shadow-focus: 0 0 0 3px rgba(95, 187, 164, 0.38);

  --cat-meds: #b79fe0;
  --cat-meds-soft: #2a2338;
  --cat-meals: #e0b85c;
  --cat-meals-soft: #332a16;
  --cat-sleep: #93a8e0;
  --cat-sleep-soft: #1f2740;
  --cat-mood: #e693a6;
  --cat-mood-soft: #38222a;
  --cat-activity: #9cc783;
  --cat-activity-soft: #22301c;

  --success-500: #6bc49c;
  --success-100: #16302a;
  --warning-500: #e0b85c;
  --warning-100: #332a16;
  --danger-500: #ee9884;
  --danger-100: #3a211b;
  --info-500: #7fb3d9;
  --info-100: #1c2c39;

  --sand-200: #2a3330;
  --sand-300: #3a443f;
  --clay-400: #6e7a73;
}