/* Design tokens: the only file with raw colours, sizes and radii.
   Layer 1 (primitives) is the raw palette and scales; only this file uses it.
   Layer 2 (semantic tokens) is what the rest of the CSS and JavaScript uses; the dark theme only swaps these. */

:root {
  /* ---- primitives: palette ---- */
  --green-50: #F6FAF7;  --green-100: #EEF5F0; --green-150: #E3F2E8; --green-200: #DFE9E2;
  --green-300: #5FBF84; --green-600: #2E7D4F; --green-900: #17301F; --green-grey-600: #5B6F62;
  --white: #FFFFFF;
  --amber-400: #E8B23A; --amber-100: #FBF1DA;
  --red-600: #B23B2C;  --red-100: #F9E5E1;
  --blue-600: #2F6DB5;  --blue-100: #E4EEF9;
  --brown-600: #8A5A14; --brown-100: #F6ECD9;
  --violet-600: #6B4FA3; --violet-100: #ECE6F7;
  --grey-600: #6B736F;  --grey-100: #ECEEEC;
  /* dark counterparts */
  --night-900: #121815; --night-800: #1B2420; --night-700: #232E29; --night-600: #2A3832;
  --night-text: #E8EFE9; --night-muted: #9DB0A5;
  --night-green-soft: #1F3A2B; --night-amber-soft: #3A2F14; --night-red: #F08A8A; --night-red-soft: #3A1F1B;
  --night-blue: #8DB8EF; --night-blue-soft: #1D2B3D;
  --night-brown: #E2B56F; --night-brown-soft: #352A17;
  --night-violet: #C3AEF0; --night-violet-soft: #2A2340;
  --night-grey: #A7B0AB; --night-grey-soft: #252C29;

  /* ---- scales (same in both themes) ---- */
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-heading: 'Bricolage Grotesque', var(--font-body);
  --text-xs: 0.75rem;  --text-sm: 0.875rem; --text-md: 1rem;
  --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.75rem;
  --leading-body: 1.45; --leading-heading: 1.2;
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
  --space-4: 1rem;    --space-5: 1.5rem; --space-6: 2rem;
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-pill: 999px;
  --tap: 44px;
}

/* ---- semantic tokens: light (default) ---- */
:root, [data-theme="light"] {
  color-scheme: light;
  --color-bg: var(--green-50);
  --color-surface: var(--white);
  --color-surface-sunk: var(--green-100);
  --color-line: var(--green-200);
  --color-text: var(--green-900);
  --color-text-muted: var(--green-grey-600);
  --color-action: var(--green-600);
  --color-action-text: var(--white);
  --color-action-soft: var(--green-150);
  --color-sun: var(--amber-400);
  --color-warn-soft: var(--amber-100);
  --color-danger: var(--red-600);
  --color-danger-soft: var(--red-100);
  --color-top: var(--blue-600);       --color-top-soft: var(--blue-100);
  --color-bottom: var(--brown-600);   --color-bottom-soft: var(--brown-100);
  --color-either: var(--violet-600);  --color-either-soft: var(--violet-100);
  --color-unset: var(--grey-600);     --color-unset-soft: var(--grey-100);
  --color-overlay: rgb(23 48 31 / .45);
  --color-scrim-photo: rgb(0 0 0 / .9);
  --color-on-photo: #FFFFFF;
  --color-on-photo-soft: rgb(255 255 255 / .15);
  --shadow-1: 0 4px 14px rgb(23 48 31 / .18);
  --shadow-2: 0 -6px 24px rgb(23 48 31 / .16);
}

/* ---- semantic tokens: dark (chosen in Settings) ---- */
[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: var(--night-900);
  --color-surface: var(--night-800);
  --color-surface-sunk: var(--night-700);
  --color-line: var(--night-600);
  --color-text: var(--night-text);
  --color-text-muted: var(--night-muted);
  --color-action: var(--green-300);
  --color-action-text: var(--night-900);
  --color-action-soft: var(--night-green-soft);
  --color-sun: var(--amber-400);
  --color-warn-soft: var(--night-amber-soft);
  --color-danger: var(--night-red);
  --color-danger-soft: var(--night-red-soft);
  --color-top: var(--night-blue);       --color-top-soft: var(--night-blue-soft);
  --color-bottom: var(--night-brown);   --color-bottom-soft: var(--night-brown-soft);
  --color-either: var(--night-violet);  --color-either-soft: var(--night-violet-soft);
  --color-unset: var(--night-grey);     --color-unset-soft: var(--night-grey-soft);
  --color-overlay: rgb(0 0 0 / .6);
  --color-scrim-photo: rgb(0 0 0 / .95);
  --color-on-photo: #FFFFFF;
  --color-on-photo-soft: rgb(255 255 255 / .15);
  --shadow-1: 0 4px 14px rgb(0 0 0 / .5);
  --shadow-2: 0 -6px 24px rgb(0 0 0 / .5);
}

/* ---- sizes of things (same in both themes) ---- */
:root {
  --thumb-sm: 48px;   /* small thumbnails (grids) */
  --thumb-md: 64px;   /* photo in a plant row */
  --thumb-lg: 72px;   /* photo in a suggestion card */
  --page-width: 680px;
  --hero-ratio: 4 / 5;
  --sheet-grip-width: 40px;
  --focus-ring: 2px;
  --dot-size: 10px;
  --check-size: 26px;
  --checkbox-size: 22px;
  --hero-contain-max: 220px;
  --label-col: 7rem;
}