/* ==========================================================================
   yeslocal design tokens  ·  v0.1 starter
   Plain CSS custom properties. No build step. Load before components.css.

   Breakpoints (mobile-first; custom properties can't be used inside
   @media, so these are the canonical values to copy):
     --bp-sm:  30rem  (480px)  large phones
     --bp-md:  48rem  (768px)  tablets / 2-col cards
     --bp-lg:  64rem  (1024px) desktop / 3-col cards, inline nav
     --bp-xl:  80rem  (1280px) wide; content max-width caps here

   Contrast (WCAG 2.x, checked with contrast.py):
     text      #2B2118 on bg #FBF7F0       14.8:1  AAA
     muted     #5E5145 on bg / oat         7.2 / 6.5:1  AAA / AA
     primary   #2F5D3A on bg; white on it   7.2 / 7.6:1  AAA
     accent    #9E4320 on bg; white on it   6.0 / 6.4:1  AA
     badge inks on their soft fills         7.4 to 9.5:1
     input border #8A7A66 on white          4.2:1  (>= 3:1 non-text)
     focus ring #1D6FA3 on bg               5.1:1  (>= 3:1 non-text)
   ========================================================================== */

:root {
  /* ---- Raw palette: "BC local": forest, cedar, oat, sun, sea ---- */
  --forest-900: #1F4128;
  --forest-800: #234A2D;
  --forest-700: #2F5D3A;   /* primary */
  --forest-100: #E3EDE1;

  --cedar-800:  #7A3317;
  --cedar-700:  #9E4320;   /* accent */
  --cedar-100:  #F8E4D8;

  --sun-800:    #5C4108;
  --sun-400:    #E9B949;
  --sun-100:    #FCEFC7;

  --sea-800:    #1D4D66;
  --sea-600:    #1D6FA3;   /* focus */
  --sea-100:    #DDEEF5;

  --roast-900:  #2B2118;   /* body text */
  --roast-600:  #5E5145;   /* muted text */
  --roast-400:  #8A7A66;   /* input borders */
  --oat-300:    #E2D6C3;   /* hairlines */
  --oat-200:    #F3ECE0;   /* alt surface */
  --oat-50:     #FBF7F0;   /* page bg */
  --white:      #FFFFFF;

  --red-700:    #A8322D;
  --red-100:    #F9E1DF;

  /* ---- Semantic colour ---- */
  --color-bg:             var(--oat-50);
  --color-surface:        var(--white);
  --color-surface-alt:    var(--oat-200);
  --color-border:         var(--oat-300);
  --color-border-strong:  var(--roast-400);

  --color-text:           var(--roast-900);
  --color-text-muted:     var(--roast-600);
  --color-text-inverse:   var(--white);

  --color-primary:        var(--forest-700);
  --color-primary-hover:  var(--forest-800);
  --color-primary-soft:   var(--forest-100);
  --color-primary-ink:    var(--forest-900);

  --color-accent:         var(--cedar-700);
  --color-accent-soft:    var(--cedar-100);
  --color-accent-ink:     var(--cedar-800);

  --color-sun-soft:       var(--sun-100);
  --color-sun-ink:        var(--sun-800);
  --color-sea-soft:       var(--sea-100);
  --color-sea-ink:        var(--sea-800);

  --color-danger:         var(--red-700);
  --color-danger-soft:    var(--red-100);

  --color-link:           var(--forest-700);
  --color-link-hover:     var(--cedar-700);
  --color-focus:          var(--sea-600);

  /* ---- Typography (system stack; no web font) ---- */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* Modular scale ~1.2, fluid only on the top steps */
  --text-xs:   0.75rem;    /* 12 */
  --text-sm:   0.875rem;   /* 14 */
  --text-base: 1rem;       /* 16 */
  --text-lg:   1.125rem;   /* 18 */
  --text-xl:   1.375rem;   /* 22 */
  --text-2xl:  clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem);   /* 24→30 */
  --text-3xl:  clamp(1.875rem, 1.4rem + 2vw, 2.5rem);     /* 30→40 */

  --leading-tight: 1.2;
  --leading-snug:  1.35;
  --leading-body:  1.55;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;

  /* ---- Spacing (4px base) ---- */
  --space-0:  0;
  --space-1:  0.25rem;  /* 4  */
  --space-2:  0.5rem;   /* 8  */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  3rem;     /* 48 */
  --space-8:  4rem;     /* 64 */

  /* ---- Radii ---- */
  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.875rem;
  --radius-pill: 999px;

  /* ---- Shadows (subtle, warm-tinted) ---- */
  --shadow-sm: 0 1px 2px rgb(43 33 24 / 0.08);
  --shadow-md: 0 1px 2px rgb(43 33 24 / 0.06), 0 4px 12px rgb(43 33 24 / 0.08);

  /* ---- Layout ---- */
  --content-max: 72rem;
  --tap-min: 2.75rem;   /* 44px touch target */

  /* ---- Motion (kept minimal; zeroed for reduced motion) ---- */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --ease: cubic-bezier(.2, .7, .3, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 0ms; --duration-base: 0ms; }
}