/* ============================================================================
   dpt.v2.css — ADDITIVE token layer for the "Scoreboard, floating" revamp.
   Loads AFTER brand/dpt.v1.css (which stays untouched). Same rules:
   change values here, never in an app; sync via sync.mjs.

   Every token is declared twice: plain light value first, then the
   light-dark() pair — same fallback strategy as dpt.v1 (old Safari keeps
   light). Do not "clean up" the duplicates.

   One correction to the handoff file this was landed from: light-dark() is a
   COLOR function. Wrapping a whole border or shadow value in it is invalid
   CSS — the browser drops the declaration silently and both themes render
   the light value. Anywhere a border or shadow flips with the theme, the
   light-dark() sits INSIDE the value at the colour position, with a plain
   fallback declared first.
   ========================================================================= */
:root {
  /* --- surfaces --- */
  --dp2-page:          #F4F4F4;
  --dp2-page:          light-dark(#F4F4F4, #0B0D10);
  --dp2-card:          #FFFFFF;
  --dp2-card:          light-dark(#FFFFFF, #14181D);
  --dp2-well:          #ECEEF0;
  --dp2-well:          light-dark(#ECEEF0, #0B0D10);   /* nested inside a card */
  --dp2-glass:         #FFFFFF;
  --dp2-glass:         light-dark(#FFFFFF, rgba(255,255,255,.045));
  --dp2-hairline:      #D7DBD4;
  --dp2-hairline:      light-dark(#D7DBD4, #242B33);
  --dp2-hairline-soft: #E3E6E4;
  --dp2-hairline-soft: light-dark(#E3E6E4, #1B222B);
  /* Card borders exist on light only; dark cards separate by surface step.
     A colour token, not a border shorthand — use as
     `border: 1px solid var(--dp2-card-border-c)`. */
  --dp2-card-border-c: #D7DBD4;
  --dp2-card-border-c: light-dark(#D7DBD4, transparent);

  /* --- text --- */
  --dp2-text:          #141A21;
  --dp2-text:          light-dark(#141A21, #EDF1F4);
  --dp2-text-2:        #55606B;
  --dp2-text-2:        light-dark(#55606B, #93A0AB);
  --dp2-label:         #55606B;
  --dp2-label:         light-dark(#55606B, #7A8794);   /* 10px micro-labels */

  /* --- status --- */
  --dp2-good:          #00753C;
  --dp2-good:          light-dark(#00753C, #2BE07B);
  --dp2-warn:          #96540A;
  --dp2-warn:          light-dark(#96540A, #F0B45A);   /* rails/marks; as light TEXT prefer slate + gold mark */
  --dp2-crit:          #C42115;
  --dp2-crit:          light-dark(#C42115, #FF8078);
  --dp2-crit-chip-bg:  #FDECEA;
  --dp2-crit-chip-bg:  light-dark(#FDECEA, #3A1E1C);

  /* --- accent (gold never moves; never text on light) --- */
  --dp2-gold:          #FFC72C;
  --dp2-gold-ink:      #141A21;
  /* Dark-mode gold accents (header subtitle, streak count) map to deep green
     on light — bronze #96540A as a text accent was rejected. */
  --dp2-accent-text:   #00753C;
  --dp2-accent-text:   light-dark(#00753C, #FFC72C);

  /* --- action: WHITE on green (owner override of dpt.v1 AMENDMENT 2 for v2
         surfaces — see README AMENDMENT 3). Hold white to bold labels
         >= 11px and large Oswald numbers. --- */
  --dp2-action:        #00A651;
  --dp2-action-ink:    #FFFFFF;
  --dp2-action-hover:  #00B357;
  --dp2-action-glow:   0 10px 30px rgba(0,166,81,.3);
  --dp2-action-glow:   0 10px 30px light-dark(rgba(0,166,81,.3), rgba(0,166,81,.25));
  --dp2-fab-shadow:    0 8px 24px rgba(0,166,81,.4);

  /* --- floating nav --- */
  --dp2-nav-bg:        rgba(255,255,255,.94);
  --dp2-nav-bg:        light-dark(rgba(255,255,255,.94), rgba(23,27,33,.9));
  --dp2-nav-border:    #D7DBD4;
  --dp2-nav-border:    light-dark(#D7DBD4, rgba(255,255,255,.06));
  --dp2-nav-item:      #55606B;
  --dp2-nav-item:      light-dark(#55606B, #7A8794);
  --dp2-nav-active:    #00753C;
  --dp2-nav-active:    light-dark(#00753C, #FFC72C);
  /* The dark theme has no nav shadow — the colour goes fully transparent
     rather than the shadow value going to `none`. */
  --dp2-nav-shadow:    0 10px 30px rgba(13,17,23,.12);
  --dp2-nav-shadow:    0 10px 30px light-dark(rgba(13,17,23,.12), rgba(0,0,0,0));

  /* --- shape --- */
  --dp2-r-hero: 14px;
  --dp2-r-card: 12px;
  --dp2-r-stat: 10px;
  --dp2-r-inner: 9px;
  --dp2-r-pill: 99px;
  --dp2-rail: 3px;          /* border-left status rail width */

  /* --- type (families come from dpt.v1) --- */
  --dp2-fs-title: 19px;     /* Oswald 700, ls .06em, uppercase */
  --dp2-fs-sub: 10px;       /* 700, ls .22em, --dp2-accent-text */
  --dp2-fs-label: 10px;     /* 700, ls .12em, uppercase, --dp2-label */
  --dp2-fs-section: 12px;   /* Oswald 700, ls .12em */
  --dp2-fs-nav: 11px;       /* Oswald, ls .14em, uppercase */
  --dp2-fs-num-stat: 32px;  /* Oswald 700 */
  --dp2-fs-num-hero: 58px;  /* Oswald 700 */

  /* Filled streak segments brighten on ink, same step as --dp-action-t.
     A token rather than a [data-theme="dark"] override: "auto" on a dark
     phone sets NO attribute (that is how theme.js works), so an attribute
     selector misses the most common dark mode. */
  --dp2-streak-on:     #00A651;
  --dp2-streak-on:     light-dark(#00A651, #2BE07B);
}

/* ---- shared components (opt-in classes, do not restyle app internals) ---- */

/* Floating pill nav. Add padding-bottom:96px (+ safe area) to the page. */
.dp2-nav {
  position: fixed; bottom: calc(18px + env(safe-area-inset-bottom));
  left: 18px; right: 18px; z-index: 40;
  display: flex; justify-content: space-around; align-items: center;
  padding: 15px 8px; border-radius: var(--dp2-r-pill);
  background: var(--dp2-nav-bg); border: 1px solid var(--dp2-nav-border);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--dp2-nav-shadow);
}
.dp2-nav.has-fab { right: 88px; }
.dp2-nav a, .dp2-nav button {
  font-family: var(--dp-font-heading); font-size: var(--dp2-fs-nav);
  letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  color: var(--dp2-nav-item); background: none; border: 0; cursor: pointer;
  padding: 8px 6px; /* keeps the 44px target with the bar's own padding */
}
.dp2-nav .is-active { color: var(--dp2-nav-active); font-weight: 700; }

.dp2-fab {
  position: fixed; right: 18px; bottom: calc(14px + env(safe-area-inset-bottom));
  width: 54px; height: 54px; border-radius: 50%; border: 0; z-index: 41;
  background: var(--dp2-action); color: var(--dp2-action-ink);
  font-size: 26px; line-height: 1; cursor: pointer; box-shadow: var(--dp2-fab-shadow);
}
.dp2-fab:hover { background: var(--dp2-action-hover); }

/* Chrome never prints, and neither does a fixed pill floating over a sheet. */
@media print {
  .dp2-nav, .dp2-fab { display: none !important; }
}

/* Primary button — white on green, bold, never below 11px. */
.dp2-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--dp2-action); color: var(--dp2-action-ink);
  font-family: var(--dp-font-heading); font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  border: 0; border-radius: var(--dp2-r-inner); padding: 11px 16px; cursor: pointer;
}
.dp2-btn:hover { background: var(--dp2-action-hover); }

/* Hero score banner */
.dp2-hero {
  background: var(--dp2-action); color: var(--dp2-action-ink);
  border-radius: var(--dp2-r-hero); padding: 16px 18px;
  box-shadow: var(--dp2-action-glow);
}

/* Stat card */
.dp2-stat {
  background: var(--dp2-card); border: 1px solid var(--dp2-card-border-c);
  border-left: var(--dp2-rail) solid var(--dp2-good);
  border-radius: var(--dp2-r-stat); padding: 12px 14px;
}
.dp2-stat.is-warn { border-left-color: var(--dp2-gold); }
.dp2-stat.is-crit { border-left-color: var(--dp2-crit); }

/* Streak bar */
.dp2-streak { display: grid; grid-template-columns: repeat(14, 1fr); gap: 3px; }
.dp2-streak > i { height: 8px; border-radius: 2px; background: var(--dp2-hairline-soft); }
.dp2-streak > i.on { background: var(--dp2-streak-on); }