/* ==========================================================================
   Design tokens — the single source of every colour, size and motion value.
   Change a value here and the whole app follows. See docs/DESIGN.md.
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* ---- Raw palette: warm stone neutrals + one pine accent ---------------- */
  --stone-0: #ffffff;
  --stone-25: #fbfaf8;
  --stone-50: #f6f4f0;
  --stone-100: #eeebe5;
  --stone-150: #e6e2da;
  --stone-200: #d9d4ca;
  --stone-300: #bfb9ae;
  --stone-400: #9c968b;
  --stone-500: #736d63;
  --stone-600: #5f5a52;
  --stone-700: #45413b;
  --stone-800: #2e2b27;
  --stone-900: #1c1b19;
  --stone-950: #121110;

  --pine-50: #eef4f1;
  --pine-100: #e2ede7;
  --pine-500: #2f6b55;
  --pine-600: #24533f;
  --pine-700: #1b4031;

  /* ---- Semantic colours (light) ------------------------------------------ */
  --bg: var(--stone-50);              /* the canvas behind everything        */
  --surface: var(--stone-0);          /* cards, grouped lists                */
  --surface-2: var(--stone-25);       /* quiet inner panels                  */
  --surface-sheet: var(--stone-0);    /* bottom sheets                       */
  --surface-raised: var(--stone-0);   /* segmented thumb, switch knob        */
  --fill: rgba(28, 27, 25, 0.05);     /* control backgrounds                 */
  --fill-strong: rgba(28, 27, 25, 0.09);
  --fill-press: rgba(28, 27, 25, 0.07);
  --hairline: rgba(28, 27, 25, 0.08);
  --separator: rgba(28, 27, 25, 0.12);
  --separator-strong: rgba(28, 27, 25, 0.22);

  --text: var(--stone-900);
  --text-2: var(--stone-600);
  --text-3: var(--stone-500);
  --text-4: var(--stone-400);

  --accent: var(--pine-600);
  --accent-press: var(--pine-700);
  --accent-tint: #e5efe9;
  --accent-text: #1f4a38;
  --on-accent: #ffffff;

  --danger: #b42318;
  --danger-tint: #fdecea;
  --caution: #8a5700;
  --caution-tint: #fbf0d9;

  /* ---- Client levels ------------------------------------------------------ */
  --hot: #c2410c;     --hot-tint: #fcebe1;   --hot-dot: #e2572b;
  --warm: #8a5700;    --warm-tint: #fbf0d9;  --warm-dot: #d9971c;
  --new: #2a64a0;     --new-tint: #e5eef8;   --new-dot: #3e7fc2;
  --cold: #56616b;    --cold-tint: #eceff1;  --cold-dot: #8d99a4;
  --lead: #5f5a52;    --lead-tint: #efece6;  --lead-dot: #b5aea2;
  --closed: #8a857c;  --closed-tint: #f1efeb; --closed-dot: #cfc9bf;

  /* ---- Chrome ------------------------------------------------------------ */
  --scrim: rgba(18, 17, 16, 0.38);
  --bar-bg: rgba(246, 244, 240, 0.82);
  --bar-blur: saturate(180%) blur(20px);
  --toast-bg: #1c1b19;
  --toast-fg: #f6f4f0;
  --focus-ring: 0 0 0 3px rgba(36, 83, 63, 0.28);

  /* ---- Type ---------------------------------------------------------------
     The phone's own typeface (SF Pro on iPhone): sharp, legible, nothing to load. */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --fs-display: 40px;   --lh-display: 44px;
  --fs-largetitle: 34px; --lh-largetitle: 41px;
  --fs-title1: 28px;    --lh-title1: 34px;
  --fs-title2: 22px;    --lh-title2: 28px;
  --fs-title3: 20px;    --lh-title3: 25px;
  --fs-headline: 17px;  --lh-headline: 22px;
  --fs-body: 17px;      --lh-body: 23px;
  --fs-callout: 16px;   --lh-callout: 21px;
  --fs-subhead: 15px;   --lh-subhead: 20px;
  --fs-footnote: 13px;  --lh-footnote: 18px;
  --fs-caption: 12px;   --lh-caption: 16px;

  --tracking-tight: -0.022em;
  --tracking-snug: -0.012em;

  /* ---- Space (4 px grid) ------------------------------------------------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 48px;
  --gutter: 20px;

  /* ---- Radius ------------------------------------------------------------ */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* ---- Motion -------------------------------------------------------------
     Strong ease-out for anything entering or reacting to a tap.
     The drawer curve is the iOS sheet feel. Nothing uses ease-in. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  --dur-press: 140ms;   /* button press                        */
  --dur-fast: 180ms;    /* colour changes, small reveals        */
  --dur-base: 240ms;    /* segmented thumb, ticks, pills        */
  --dur-screen: 360ms;  /* pushing a screen                     */
  --dur-sheet: 460ms;   /* bottom sheet opening                 */
  --dur-exit: 240ms;    /* anything leaving: faster than enter  */

  /* ---- Layout -------------------------------------------------------------- */
  --tabbar-h: 54px;
  --navbar-h: 44px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --kb: 0px; /* on-screen keyboard height, set by JS */
  --content-max: 720px;
}

/* ---- Dark (follows the phone's setting) ----------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e0e0d;
    --surface: #1a1a18;
    --surface-2: #1f1e1c;
    --surface-sheet: #1c1b19;
    --surface-raised: #3a3936;
    --fill: rgba(255, 255, 255, 0.06);
    --fill-strong: rgba(255, 255, 255, 0.11);
    --fill-press: rgba(255, 255, 255, 0.09);
    --hairline: rgba(255, 255, 255, 0.07);
    --separator: rgba(255, 255, 255, 0.11);
    --separator-strong: rgba(255, 255, 255, 0.24);

    --text: #f3f1ec;
    --text-2: #b0aba2;
    --text-3: #8f8a81;
    --text-4: #6e6a63;

    --accent: #2e7558;
    --accent-press: #255f48;
    --accent-tint: rgba(111, 179, 148, 0.16);
    --accent-text: #86c9a9;
    --on-accent: #ffffff;

    --danger: #ff8a7a;
    --danger-tint: rgba(255, 110, 90, 0.14);
    --caution: #e9b85a;
    --caution-tint: rgba(217, 151, 28, 0.16);

    --hot: #f59a74;   --hot-tint: rgba(226, 87, 43, 0.17);   --hot-dot: #f0764b;
    --warm: #ebbc5e;  --warm-tint: rgba(217, 151, 28, 0.17); --warm-dot: #e3a737;
    --new: #91bbe8;   --new-tint: rgba(62, 127, 194, 0.19);  --new-dot: #5d9ad6;
    --cold: #b4bfc8;  --cold-tint: rgba(141, 153, 164, 0.16); --cold-dot: #93a1ad;
    --lead: #c4beb4;  --lead-tint: rgba(255, 255, 255, 0.07); --lead-dot: #8a847a;
    --closed: #8f8a81; --closed-tint: rgba(255, 255, 255, 0.05); --closed-dot: #5d5953;

    --scrim: rgba(0, 0, 0, 0.55);
    --bar-bg: rgba(14, 14, 13, 0.78);
    --toast-bg: #f3f1ec;
    --toast-fg: #1c1b19;
    --focus-ring: 0 0 0 3px rgba(134, 201, 169, 0.32);
  }
}