/* ==========================================================================
   Design tokens — Baidulux Old English Sheepdogs
   Palette drawn from the breed: bone white and charcoal grey of the coat,
   heather and sage of the English pastoral origin, muted brass for actions.
   ========================================================================== */

:root {
  /* --- Surfaces ------------------------------------------------------- */
  --bone:        #FAF7F1;   /* page ground */
  --bone-2:      #F2EDE4;   /* alternating band */
  --paper:       #FFFFFF;   /* cards, panels */
  --paper-sunk:  #F6F2EB;   /* inset wells, form fields */

  /* --- Ink ------------------------------------------------------------ */
  --ink:         #1E2226;   /* headings, body */
  --ink-2:       #4C545C;   /* secondary text */
  --ink-3:       #767F88;   /* captions, meta */

  /* --- Breed greys ---------------------------------------------------- */
  --slate:       #64707C;
  --slate-soft:  #9AA5AF;

  /* --- Accents -------------------------------------------------------- */
  --sage:        #63755F;   /* pastoral green — quiet confirmations */
  --sage-soft:   #E4EAE1;
  --heather:     #7C7A93;   /* muted violet-grey — informational */
  --heather-soft:#EAE8F0;
  --brass:       #A8813F;   /* primary action */
  --brass-deep:  #8A6930;
  --brass-soft:  #F3EADA;

  /* --- Status --------------------------------------------------------- */
  --ok:          #3F6B4A;
  --ok-soft:     #E3EEE5;
  --warn:        #8A6224;
  --warn-soft:   #F7EDDB;
  --stop:        #8C3B33;
  --stop-soft:   #F6E3E1;

  /* --- Lines & shadow ------------------------------------------------- */
  --line:        #E4DDD1;
  --line-strong: #D2C8B8;
  --shadow-sm:   0 1px 2px rgba(30, 34, 38, .05), 0 2px 6px rgba(30, 34, 38, .04);
  --shadow-md:   0 4px 12px rgba(30, 34, 38, .07), 0 12px 28px rgba(30, 34, 38, .06);
  --shadow-lg:   0 12px 32px rgba(30, 34, 38, .10), 0 32px 64px rgba(30, 34, 38, .08);
  --ring:        0 0 0 3px rgba(168, 129, 63, .35);

  /* --- Type ----------------------------------------------------------- */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;

  /* Fluid scale — clamps between 375px and 1440px viewports */
  --t-xs:   0.78rem;
  --t-sm:   0.875rem;
  --t-base: 1rem;
  --t-md:   clamp(1.06rem, 1.01rem + 0.22vw, 1.19rem);
  --t-lg:   clamp(1.25rem, 1.15rem + 0.44vw, 1.5rem);
  --t-xl:   clamp(1.5rem, 1.32rem + 0.78vw, 1.95rem);
  --t-2xl:  clamp(1.85rem, 1.52rem + 1.42vw, 2.7rem);
  --t-3xl:  clamp(2.25rem, 1.66rem + 2.5vw, 3.7rem);
  --t-4xl:  clamp(2.6rem, 1.62rem + 4.2vw, 5rem);

  /* --- Space (4px base) ----------------------------------------------- */
  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;
  --s-9: 6rem;    --s-10: 8rem;
  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);

  /* --- Shape ---------------------------------------------------------- */
  --r-sm: 6px;  --r-md: 12px;  --r-lg: 20px;  --r-xl: 28px;  --r-pill: 999px;

  /* --- Layout --------------------------------------------------------- */
  --wrap:       1200px;
  --wrap-wide:  1440px;
  --wrap-text:  68ch;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* --- Dark theme ------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bone:        #15171A;
    --bone-2:      #1A1D21;
    --paper:       #1E2126;
    --paper-sunk:  #24282E;

    --ink:         #EDE8E0;
    --ink-2:       #B3BAC2;
    --ink-3:       #8A939C;

    --slate:       #9AA5AF;
    --slate-soft:  #6B757F;

    --sage:        #93AC8D;
    --sage-soft:   #242E24;
    --heather:     #A8A5C0;
    --heather-soft:#26242E;
    --brass:       #CFA662;
    --brass-deep:  #E0BC80;
    --brass-soft:  #2C2519;

    --ok:          #8CBE99;
    --ok-soft:     #1E2A21;
    --warn:        #D9AE68;
    --warn-soft:   #2C2417;
    --stop:        #D99189;
    --stop-soft:   #2E1D1B;

    --line:        #2C3138;
    --line-strong: #3C434B;
    --shadow-sm:   0 1px 2px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.3);
    --shadow-md:   0 4px 12px rgba(0,0,0,.45), 0 12px 28px rgba(0,0,0,.35);
    --shadow-lg:   0 12px 32px rgba(0,0,0,.5), 0 32px 64px rgba(0,0,0,.4);
    --ring:        0 0 0 3px rgba(207, 166, 98, .4);
  }
}

:root[data-theme="dark"] {
  --bone:        #15171A;
  --bone-2:      #1A1D21;
  --paper:       #1E2126;
  --paper-sunk:  #24282E;

  --ink:         #EDE8E0;
  --ink-2:       #B3BAC2;
  --ink-3:       #8A939C;

  --slate:       #9AA5AF;
  --slate-soft:  #6B757F;

  --sage:        #93AC8D;
  --sage-soft:   #242E24;
  --heather:     #A8A5C0;
  --heather-soft:#26242E;
  --brass:       #CFA662;
  --brass-deep:  #E0BC80;
  --brass-soft:  #2C2519;

  --ok:          #8CBE99;
  --ok-soft:     #1E2A21;
  --warn:        #D9AE68;
  --warn-soft:   #2C2417;
  --stop:        #D99189;
  --stop-soft:   #2E1D1B;

  --line:        #2C3138;
  --line-strong: #3C434B;
  --shadow-sm:   0 1px 2px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.3);
  --shadow-md:   0 4px 12px rgba(0,0,0,.45), 0 12px 28px rgba(0,0,0,.35);
  --shadow-lg:   0 12px 32px rgba(0,0,0,.5), 0 32px 64px rgba(0,0,0,.4);
  --ring:        0 0 0 3px rgba(207, 166, 98, .4);
}