/* ===========================================================================
   dentbrain: design tokens
   ---------------------------------------------------------------------------
   Light-first clinical UI, because PerioBrain is light and its users must
   recognise this app. Dark mode is a first-class citizen, declared three ways:
     :root                                  → light default
     @media (prefers-color-scheme: dark)    → system preference
     :root[data-theme="dark"|"light"]       → explicit user override, wins
   =========================================================================== */

:root {
  /* --- Accent: PerioBrain's own mint. The action colour. ------------------ */
  --mint:            #2ECC9B;
  --mint-bright:     #3FE0C5;
  --mint-ink:        #0B3B2E;   /* text on mint */
  --mint-soft:       rgba(46, 204, 155, 0.12);
  --mint-edge:       rgba(46, 204, 155, 0.34);

  /* --- Ink: section header bars (PerioBrain uses dark pill headers). ------ */
  --ink:             #1F2534;
  --ink-2:           #2B3040;

  /* --- Brand gold. RESERVED for the wordmark colon. Nothing else. -------- */
  --gold:            #D2A64B;

  /* --- Ground -------------------------------------------------------------
     --canvas is the page behind the app column on desktop.
     --surface is the app itself.                                            */
  --canvas:          #EEF1F0;
  --surface:         #FFFFFF;
  --surface-2:       #F4F6F6;   /* cards, collapsed rows */
  --surface-3:       #E9EDEC;   /* inactive segment track */

  /* --- Text -------------------------------------------------------------- */
  --text:            #171B25;
  --text-2:          #5A6472;   /* sublabels */
  --text-3:          #8A93A0;   /* meta, timestamps */
  --text-on-ink:     #FFFFFF;

  /* --- Lines ------------------------------------------------------------- */
  --line:            #DCE1E0;
  --line-strong:     #C3CBC9;

  /* --- Status ------------------------------------------------------------ */
  --ok:              #2E9E6B;
  --warn:            #B8860B;
  --warn-soft:       rgba(210, 166, 75, 0.14);
  --danger:          #C4453D;
  --danger-soft:     rgba(196, 69, 61, 0.10);

  /* --- Elevation --------------------------------------------------------- */
  --shadow-1:        0 1px 2px rgba(23, 27, 37, 0.06);
  --shadow-2:        0 4px 16px rgba(23, 27, 37, 0.10);
  --shadow-float:    0 6px 20px rgba(46, 204, 155, 0.35);

  /* --- Type -------------------------------------------------------------- */
  --font-display:    'Fraunces', Georgia, 'Times New Roman', serif;
  --font-ui:         'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --size-xs:         0.75rem;
  --size-sm:         0.8125rem;
  --size-base:       0.9375rem;
  --size-md:         1rem;
  --size-lg:         1.125rem;
  --size-xl:         1.375rem;
  --size-2xl:        1.75rem;
  --size-3xl:        2.25rem;

  /* --- Space ------------------------------------------------------------- */
  --sp-1:            0.25rem;
  --sp-2:            0.5rem;
  --sp-3:            0.75rem;
  --sp-4:            1rem;
  --sp-5:            1.5rem;
  --sp-6:            2rem;
  --sp-7:            3rem;

  /* --- Shape ------------------------------------------------------------- */
  --r-sm:            8px;
  --r-md:            12px;
  --r-lg:            16px;
  --r-pill:          999px;

  /* --- Layout ------------------------------------------------------------ */
  --app-max:         500px;   /* desktop app column */
  --header-h:        56px;
  --tap:             44px;    /* minimum touch target */

  /* --- Motion. Restrained and purposeful. -------------------------------- */
  --t-fast:          120ms;
  --t-base:          200ms;
  --t-slow:          320ms;
  --ease:            cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --- System dark preference ---------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --canvas:        #0C1014;
    --surface:       #151A21;
    --surface-2:     #1C222B;
    --surface-3:     #242C36;

    --ink:           #202836;
    --ink-2:         #2B3444;

    --text:          #E8ECEF;
    --text-2:        #9AA5B1;
    --text-3:        #6E7A87;
    --text-on-ink:   #FFFFFF;

    --line:          #262E38;
    --line-strong:   #38424E;

    --mint-ink:      #06251C;
    --mint-soft:     rgba(46, 204, 155, 0.16);
    --mint-edge:     rgba(46, 204, 155, 0.42);

    --ok:            #3FBE85;
    --warn:          #D8A93F;
    --warn-soft:     rgba(216, 169, 63, 0.16);
    --danger:        #E0645B;
    --danger-soft:   rgba(224, 100, 91, 0.14);

    --shadow-1:      0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2:      0 4px 16px rgba(0, 0, 0, 0.5);
    --shadow-float:  0 6px 20px rgba(46, 204, 155, 0.28);
  }
}

/* --- Explicit override. Must beat the media query in BOTH directions. ----- */
:root[data-theme="dark"] {
  --canvas:          #0C1014;
  --surface:         #151A21;
  --surface-2:       #1C222B;
  --surface-3:       #242C36;
  --ink:             #202836;
  --ink-2:           #2B3444;
  --text:            #E8ECEF;
  --text-2:          #9AA5B1;
  --text-3:          #6E7A87;
  --text-on-ink:     #FFFFFF;
  --line:            #262E38;
  --line-strong:     #38424E;
  --mint-ink:        #06251C;
  --mint-soft:       rgba(46, 204, 155, 0.16);
  --mint-edge:       rgba(46, 204, 155, 0.42);
  --ok:              #3FBE85;
  --warn:            #D8A93F;
  --warn-soft:       rgba(216, 169, 63, 0.16);
  --danger:          #E0645B;
  --danger-soft:     rgba(224, 100, 91, 0.14);
  --shadow-1:        0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2:        0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-float:    0 6px 20px rgba(46, 204, 155, 0.28);
}

:root[data-theme="light"] {
  --canvas:          #EEF1F0;
  --surface:         #FFFFFF;
  --surface-2:       #F4F6F6;
  --surface-3:       #E9EDEC;
  --ink:             #1F2534;
  --ink-2:           #2B3040;
  --text:            #171B25;
  --text-2:          #5A6472;
  --text-3:          #8A93A0;
  --text-on-ink:     #FFFFFF;
  --line:            #DCE1E0;
  --line-strong:     #C3CBC9;
  --mint-ink:        #0B3B2E;
  --mint-soft:       rgba(46, 204, 155, 0.12);
  --mint-edge:       rgba(46, 204, 155, 0.34);
  --ok:              #2E9E6B;
  --warn:            #B8860B;
  --warn-soft:       rgba(210, 166, 75, 0.14);
  --danger:          #C4453D;
  --danger-soft:     rgba(196, 69, 61, 0.10);
  --shadow-1:        0 1px 2px rgba(23, 27, 37, 0.06);
  --shadow-2:        0 4px 16px rgba(23, 27, 37, 0.10);
  --shadow-float:    0 6px 20px rgba(46, 204, 155, 0.35);
}

/* --- Motion preference. Respected everywhere, no exceptions. -------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0.01ms;
    --t-base: 0.01ms;
    --t-slow: 0.01ms;
  }
}