/* ============================================================================
   AreteOS — Design Tokens (colors + type)
   The Optimization OS for Men · v1 Protocol module

   Single source of truth for the web/HTML side of AreteOS, transcribed from the
   native iOS design system (DesignSystem/DesignSystem.swift) and the locked
   "de-AI'd v3.2" calculator mockup (mockups/03-calculator.html).

   Principles (do not violate):
   - Dark-first "instrument panel" look. Deep flat surfaces, 1px hairlines.
   - OKLCH neutrals are TINTED toward the brand hue (~162-168, green). There is
     NO pure black and NO pure white anywhere.
   - ONE rationed vital-green accent (<=10% of any screen). Never color the hero
     number; the number is hero by SIZE + CONTRAST.
   - 8-point spacing grid. Continuous (squircle) corners.
   - NO glassmorphism, NO gradients, NO glow/neon shadow, NO hero-metric cards,
     NO colored left/top side-stripes, NO all-caps labels. These are "AI app" tells.
   ============================================================================ */

:root {
  /* ---- Brand hue anchors -------------------------------------------------- */
  --hue-neutral: 168;   /* @kind other */ /* neutrals are tinted toward this */
  --hue-accent:  162;   /* @kind other */ /* vital green */

  /* ========================================================================
     COLOR — DARK (the default / primary appearance)
     ======================================================================== */

  /* Surfaces (60 / 30 / 10) */
  --d-surface-base:    oklch(0.165 0.012 168);  /* screen background (dominant ~60%) */
  --d-surface-raised:  oklch(0.205 0.012 168);  /* grouped input card / raised fill (~30%) */
  --d-surface-input:   oklch(0.235 0.013 168);  /* deeper field fill / segmented track */

  /* Lines */
  --d-border-subtle:     oklch(0.30 0.012 168); /* 1px hairlines, separators, field outline */
  --d-border-instrument: oklch(0.40 0.012 168); /* syringe barrel / strong instrument strokes */

  /* Text */
  --d-text-primary:   oklch(0.965 0.008 168);   /* result number, headings (highest contrast) */
  --d-text-secondary: oklch(0.74  0.012 168);   /* labels, "units"/"mL", helper copy */
  --d-text-tertiary:  oklch(0.635 0.013 168);   /* placeholders, tick labels, muted/disabled */

  /* Rationed accent (vital green) */
  --d-accent:         oklch(0.82 0.165 162);    /* accent as text/stroke: selected text, save, plunger */
  --d-accent-fill:    oklch(0.82 0.165 162);    /* brighter fill: selected segment, gauge liquid */
  --d-accent-pressed: oklch(0.74 0.155 162);    /* pressed/active state */
  --d-on-accent:      oklch(0.22 0.05  162);    /* ink ON a filled accent surface */
  --d-focus-ring:     oklch(0.82 0.165 162);    /* 2pt active-field ring == accent */

  /* Status (always paired with an icon + text, never color alone) */
  --d-warn:        oklch(0.82 0.13 78);         /* amber: between-marks / non-blocking attention */
  --d-destructive: oklch(0.70 0.18 25);         /* invalid input only (from P3 1.0/0.42/0.38) */

  /* ========================================================================
     COLOR — LIGHT (equal-priority alternate appearance)
     ======================================================================== */
  --l-surface-base:    oklch(0.975 0.006 168);
  --l-surface-raised:  oklch(0.992 0.003 168);
  --l-surface-input:   oklch(0.955 0.006 168);

  --l-border-subtle:     oklch(0.90 0.008 168);
  --l-border-instrument: oklch(0.80 0.012 168);

  --l-text-primary:   oklch(0.23 0.02  168);
  --l-text-secondary: oklch(0.44 0.02  168);
  --l-text-tertiary:  oklch(0.50 0.018 168);

  --l-accent:         oklch(0.55 0.135 162);    /* darker green: clears AA as text */
  --l-accent-fill:    oklch(0.66 0.15  162);
  --l-accent-pressed: oklch(0.48 0.13  162);
  --l-on-accent:      oklch(0.99 0.01  162);
  --l-focus-ring:     oklch(0.55 0.135 162);

  --l-warn:        oklch(0.50 0.11 70);
  --l-destructive: oklch(0.56 0.19 27);         /* from P3 0.784/0.212/0.184 */

  /* ========================================================================
     SEMANTIC ALIASES — default to DARK. Wrap a subtree in [data-theme="light"]
     (see below) to flip every alias at once.
     ======================================================================== */
  --surface-base:      var(--d-surface-base);
  --surface-raised:    var(--d-surface-raised);
  --surface-input:     var(--d-surface-input);
  --border-subtle:     var(--d-border-subtle);
  --border-instrument: var(--d-border-instrument);
  --text-primary:      var(--d-text-primary);
  --text-secondary:    var(--d-text-secondary);
  --text-tertiary:     var(--d-text-tertiary);
  --accent:            var(--d-accent);
  --accent-fill:       var(--d-accent-fill);
  --accent-pressed:    var(--d-accent-pressed);
  --on-accent:         var(--d-on-accent);
  --focus-ring:        var(--d-focus-ring);
  --warn:              var(--d-warn);
  --destructive:       var(--d-destructive);

  /* ========================================================================
     SPACING — 8-point grid (multiples of 4)
     ======================================================================== */
  --space-xxs:  4px;   /* icon-to-text gaps, unit-suffix gap */
  --space-xs:   8px;   /* compact in-field spacing (value <-> unit) */
  --space-sm:   12px;  /* intra-group: label <-> input */
  --space-md:   16px;  /* DEFAULT element spacing; screen margin; card inner padding */
  --space-lg:   24px;  /* between input groups; result-block section padding */
  --space-xl:   32px;  /* major section breaks */
  --space-xxl:  48px;  /* hero breathing room */
  --space-xxxl: 64px;  /* page-level spacing (rare) */

  /* ========================================================================
     RADIUS — every shape uses a continuous (squircle) corner
     ======================================================================== */
  --radius-chip:    10px;  /* unit chips */
  --radius-segment: 10px;  /* segmented-control segments + track */
  --radius-field:   12px;  /* numeric input fields */
  --radius-button:  14px;  /* filled primary/secondary buttons */
  --radius-card:    20px;  /* grouped input card / raised surfaces */
  /* CSS cannot draw a true squircle; this approximates the iOS continuous curve. */

  /* ========================================================================
     ELEVATION
     - Dark: raised by a lighter fill (--surface-raised) + 1px hairline. NO shadow.
     - Light: a soft shadow (black 8%, 12px blur, 4px y). NO glass, no glow.
     ======================================================================== */
  --shadow-card-dark:  none;
  --shadow-card-light: 0 4px 12px oklch(0 0 0 / 0.08);

  /* ========================================================================
     MOTION — confirmation, not decoration. Every movement has a reduced-motion
     fallback (cross-fade / instant) at the call site.
     ======================================================================== */
  --motion-micro:  120ms;  /* @kind other */ /* field focus, chip/segment select, button press */
  --motion-value:  200ms;  /* @kind other */ /* live result recompute (pair with a digit cross-fade) */
  --motion-settle: 350ms;  /* @kind other */ /* result settling / first valid result (slight snap) */
  --motion-banner: 250ms;  /* @kind other */ /* between-marks callout slide-in */
  --ease-snappy: cubic-bezier(0.2, 0.9, 0.3, 1);  /* @kind other */
  --ease-smooth: cubic-bezier(0.4, 0.0, 0.2, 1);  /* @kind other */

  /* ========================================================================
     TYPE — Apple system faces (SF Pro). Used via the -apple-system stack so it
     renders as real SF on Apple devices. SF Pro is Apple-proprietary and is NOT
     bundled; on non-Apple platforms it falls back to the platform system sans.
     ======================================================================== */
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  --font-text:    -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "SFMono-Regular", Menlo, monospace;

  /* iOS text-style scale (the app uses Dynamic Type styles, never fixed sizes).
     These are the @1x reference px sizes for the web recreation. */
  --type-large-title: 34px;  /* the hero result number */
  --type-title1:      28px;
  --type-title2:      22px;
  --type-title3:      20px;  /* screen headers ("Calculator") */
  --type-body:        17px;  /* default body */
  --type-subheadline: 15px;  /* labels, callouts, button text */
  --type-footnote:    13px;  /* disclaimer, gauge chrome */
  --type-caption:     12px;  /* kickers, fine print */

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

  --leading-tight:   1.04;   /* hero number */
  --leading-snug:    1.2;    /* headings */
  --leading-normal:  1.45;   /* body / callouts */
}

/* Flip the whole palette to LIGHT on any subtree. */
[data-theme="light"] {
  --surface-base:      var(--l-surface-base);
  --surface-raised:    var(--l-surface-raised);
  --surface-input:     var(--l-surface-input);
  --border-subtle:     var(--l-border-subtle);
  --border-instrument: var(--l-border-instrument);
  --text-primary:      var(--l-text-primary);
  --text-secondary:    var(--l-text-secondary);
  --text-tertiary:     var(--l-text-tertiary);
  --accent:            var(--l-accent);
  --accent-fill:       var(--l-accent-fill);
  --accent-pressed:    var(--l-accent-pressed);
  --on-accent:         var(--l-on-accent);
  --focus-ring:        var(--l-focus-ring);
  --warn:              var(--l-warn);
  --destructive:       var(--l-destructive);
}

/* ============================================================================
   SEMANTIC TYPE CLASSES — apply directly or copy the rules.
   All numeric values use tabular (monospaced) digits so they don't reflow live.
   ============================================================================ */
.ds-hero-number {
  font-family: var(--font-display);
  font-size: var(--type-large-title);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  color: var(--text-primary);          /* NEVER the accent color */
  font-variant-numeric: tabular-nums;
}
.ds-h1, .ds-title2 {
  font-family: var(--font-display);
  font-size: var(--type-title2);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.ds-h2, .ds-title3 {
  font-family: var(--font-display);
  font-size: var(--type-title3);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--text-primary);
}
.ds-body {
  font-family: var(--font-text);
  font-size: var(--type-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
}
.ds-label {
  font-family: var(--font-text);
  font-size: var(--type-subheadline);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
}
.ds-callout {
  font-family: var(--font-text);
  font-size: var(--type-subheadline);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
}
.ds-footnote {
  font-family: var(--font-text);
  font-size: var(--type-footnote);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
}
.ds-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}