/* dpt.v1.css: brand palette and the user-toggled theme layer. Values mirror astra_childtheme/style.css
   (the --c-* names in the trailing notes). Change a value here, never in an app, then run sync.mjs;
   a breaking change is a new dpt.vN.css. */

/* Self-hosted variable fonts (Oswald OFL-1.1, Roboto Apache-2.0), Google "latin" subset;
   swap so text shows at once on slow gym wifi. */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url('fonts/oswald.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/roboto.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Verbatim from astra_childtheme/style.css; the site, booking wizard and apps all resolve these. */
  --dp-brand:        #FFC72C;   /* --c-brand       primary CTA on the site */
  --dp-brand-dark:   #D69E06;   /* --c-brand-dark  its hover */
  --dp-green:        #00753C;   /* --c-green       green that is safe as text */
  --dp-green-brand:  #00A651;   /* --c-green-brand fills, accents */
  --dp-green-hover:  #008C47;   /* --c-green-hover */
  --dp-ink:          #141A21;   /* --c-ink */
  --dp-ink-deep:     #0D1117;   /* --c-ink-deep    app chrome */
  --dp-slate:        #55606B;   /* --c-slate       muted text */
  --dp-paper:        #F4F4F4;   /* --c-paper */
  --dp-mint:         #E6F6EE;   /* --c-mint */
  --dp-border:       #D7DBD4;   /* --c-border */
  --dp-field-border: #92968F;   /* --c-field-border */
  --dp-field-hover:  #7A7F78;   /* --c-field-border-hover */
  --dp-white:        #FFFFFF;
  --dp-error:        #C43D3D;   /* --c-error       form validation */

  /* App-only status set: a vivid mark step for rails and fills, and a text-safe step per status
     (ratios in README.md). */
  --dp-good:         #00753C;
  --dp-good-wash:    #E6F6EE;
  --dp-warn:         #96540A;
  --dp-warn-wash:    #FBEFD8;
  --dp-crit:         #D92D20;   /* mark only — 4.1:1 on its wash, fails as text */
  --dp-crit-ink:     #C42115;   /* text step — 5.1:1 */
  --dp-crit-wash:    #FDECEA;
  --dp-raised-dark:  #232D3B;

  /* AMENDMENT 36: white label on the deep-green fill (5.82:1); hover goes brighter (#00854A, 4.71:1).
     #00A651 keeps the no-text jobs: goal bars, streak fills, top rules, glow. */
  --dp-action:       #00753C;
  --dp-action-ink:   #FFFFFF;
  --dp-action-hover: #00854A;

  /* Gold is never text on light (#D69E06 on white is 2.40:1): a fill, pill or rail with ink on it. */
  --dp-attention:     #FFC72C;
  --dp-attention-ink: #141A21;

  --dp-font-heading: 'Oswald', 'Roboto Condensed', 'Arial Narrow', sans-serif;
  --dp-font-body:    'Roboto', -apple-system, 'Segoe UI', Arial, sans-serif;
  --dp-fs-display: clamp(2.75rem, 1.5rem + 5vw, 4.5rem);
  --dp-fs-h1:      clamp(2.25rem, 1.4rem + 3.6vw, 3.5rem);
  --dp-fs-h2:      clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
  --dp-fs-h3:      clamp(1.25rem, 1.1rem + .8vw, 1.5rem);
  --dp-fs-lead:    clamp(1.0625rem, 1rem + .5vw, 1.25rem);
  --dp-fs-body:    1rem;
  --dp-fs-small:   0.875rem;

  --dp-sp-1: 4px;  --dp-sp-2: 8px;  --dp-sp-3: 16px;
  --dp-sp-4: 24px; --dp-sp-5: 48px; --dp-sp-6: 96px;
  --dp-radius:    8px;
  --dp-radius-lg: 16px;
  --dp-btn-h:     48px;   /* standalone, per the site */
  --dp-btn-h-sm:  44px;   /* in-card, and the phone minimum */
  --dp-btn-h-desk: 40px;  /* app-only: dense tables. See README Deltas. */
  --dp-shadow:    0 4px 18px rgba(13,17,23,.14);
  --dp-shadow-lg: 0 12px 32px rgba(13,17,23,.18);
  --dp-measure:   65ch;
}

/* Theme: color-scheme follows data-theme (set before paint by theme.js) or the OS.
   Tokens below are declared twice on purpose: the plain light value, then light-dark(). Safari < 17.5
   drops the second and keeps light. Do not "clean up" the duplicates. The raw palette above never
   flips; apps alias these semantic names. */
:root                    { color-scheme: light dark; }
:root[data-theme="light"]{ color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* Reserve the scrollbar gutter so centred fixed pills and columns do not jump sideways when a page
   starts to overflow. */
:root { scrollbar-gutter: stable; }

/* react-remove-scroll injects body margin-right !important on lock; the stable gutter already
   reserves that space. A page opting out with scrollbar-gutter:auto must also set
   --dp-scroll-lock-compensation:initial to restore the library's measured gap. */
@supports (scrollbar-gutter: stable) {
  :root { --dp-scroll-lock-compensation: 0px; }
  html body[data-scroll-locked] {
    margin-right: var(--dp-scroll-lock-compensation, var(--removed-body-scroll-bar-size, 0px)) !important;
  }
}

:root {
  --dp-surface:        #F4F4F4;
  --dp-surface:        light-dark(#F4F4F4, #0D1117);   /* the page */
  /* #232D3B is only 1.34:1 on the dark page; --dp-line carries the card edge. */
  --dp-surface-raised: #FFFFFF;
  --dp-surface-raised: light-dark(#FFFFFF, #232D3B);   /* cards, modals */
  --dp-surface-sunken: #ECEEF0;
  --dp-surface-sunken: light-dark(#ECEEF0, #080B0F);   /* wells, table heads */

  /* Chrome is dark in both themes. */
  --dp-chrome:     #0D1117;
  --dp-chrome:     light-dark(#0D1117, #06090D);
  --dp-chrome-ink: #FFFFFF;
  --dp-chrome-ink: light-dark(#FFFFFF, #E8EBEE);

  /* Not light-dark(): the chrome bar is dark in both themes, so green text, rules or focus on it
     needs the bright step (10.86:1 on the light-mode bar, 11.45:1 on the dark one). */
  --dp-chrome-green: #2BE07B;

  --dp-text:       #141A21;
  --dp-text:       light-dark(#141A21, #E8EBEE);       /* 15.8:1 on surface */
  --dp-text-muted: #55606B;
  --dp-text-muted: light-dark(#55606B, #A2ADB6);       /* 8.3:1 on surface */
  /* Dark line: 2.41:1 on the page, 1.81:1 on the card. Text on a --line fill needs --dp-text
     (muted lands at 3.4:1). */
  --dp-line:       #D7DBD4;
  --dp-line:       light-dark(#D7DBD4, #465468);

  /* BREAK 3: on ink the green brightens to #2BE07B (10.9:1); the label stays dark in both themes. */
  --dp-action-t:      #00A651;
  --dp-action-t:      light-dark(#00A651, #2BE07B);
  --dp-action-t-ink:  #0D1117;
  --dp-action-t-ink:  light-dark(#0D1117, #06120B);
  --dp-action-t-hover:#00B357;
  --dp-action-t-hover:light-dark(#00B357, #5CE99A);

  /* Green as words: deep step on light, bright step on dark. */
  --dp-green-text: #00753C;
  --dp-green-text: light-dark(#00753C, #2BE07B);

  /* Status. Gold needs no dark variant (12.1:1 on the dark surface). */
  --dp-good-t:      #00753C;
  --dp-good-t:      light-dark(#00753C, #2BE07B);
  --dp-good-wash-t: #E6F6EE;
  --dp-good-wash-t: light-dark(#E6F6EE, #0E2A1C);
  --dp-warn-t:      #96540A;
  --dp-warn-t:      light-dark(#96540A, #F0B45A);
  --dp-warn-wash-t: #FBEFD8;
  --dp-warn-wash-t: light-dark(#FBEFD8, #2A2413);
  --dp-crit-t:      #C42115;
  --dp-crit-t:      light-dark(#C42115, #FF8078);
  --dp-crit-wash-t: #FDECEA;
  --dp-crit-wash-t: light-dark(#FDECEA, #2B1614);

  /* light-dark() sits at the colour position only: wrapping the whole shadow is invalid and
     computes to none (AMENDMENT 10). */
  --dp-shadow-t:    0 4px 18px rgba(13,17,23,.14);
  --dp-shadow-t:    0 4px 18px light-dark(rgba(13,17,23,.14), rgba(0,0,0,.5));
}

/* Superseded: outline: none in the focus floor below resets outline-color. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline-color: var(--dp-action-t);
}

/* Theme toggle; inherits the text colour so it works on dark bars and light surfaces. */
.dp-theme-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0;
  border: 1px solid currentColor; border-radius: 8px;
  background: transparent; color: inherit; cursor: pointer;
  opacity: .75; transition: opacity .12s;
}
.dp-theme-btn:hover { opacity: 1; }
/* No label beside it to widen the hit area, so it takes the touch minimum. */
@media (pointer: coarse) {
  .dp-theme-btn { width: var(--dp-btn-h-sm); height: var(--dp-btn-h-sm); }
}
.dp-theme-btn svg { display: block; width: 17px; height: 17px; }
/* Only one of the two icons is ever shown. */
:root[data-theme="dark"] .dp-theme-btn .dp-i-moon,
:root:not([data-theme="dark"]) .dp-theme-btn .dp-i-sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .dp-theme-btn .dp-i-moon { display: none; }
  :root:not([data-theme]) .dp-theme-btn .dp-i-sun  { display: block; }
}

/* Accessibility floor, scoped to plain elements so adopting this file cannot restyle app components. */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: none; /* AMENDMENT 36: no outer ring; the control's own border turns green */
  border-color: var(--dp-green-brand);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Opt-in so it cannot silently resize existing controls. */
.dp-tap { min-height: var(--dp-btn-h-sm); min-width: var(--dp-btn-h-sm); }

/* Screen-reader-only text, for icon-only controls that need a name. */
.dp-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Wide content must scroll inside its own box, never the page body. */
.dp-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.dp-num { font-variant-numeric: tabular-nums; }