/* ==========================================================================
   PROTOCOL V.01 — Complete Design Tokens
   Brutalist minimalism. Zero radius. 1px borders. SF Pro. Monospaced stats.
   Source: BRAND.md + Theme.swift (iOS app)
   ========================================================================== */

/* -- Web font fallbacks for non-Apple devices ----------------------------- */
/* On Apple platforms: SF Pro (system) is used automatically.
   Off-Apple: Inter substitutes for SF Pro, JetBrains Mono for SF Mono.
   Both are variable fonts so a single file covers all weights. */
@font-face {
  font-family: "Inter";
  src: url("./fonts/Inter-Variable.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("./fonts/JetBrainsMono-Variable.ttf") format("truetype-variations");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* -- Core palette (LIGHT MODE) ------------------------------------------ */
  --bg:                #D6D6D6;   /* warm white */
  --surface:           #E0E0E0;   /* card / cell fill */
  --surface-elevated:  #EBEBEB;   /* sheets, elevated cards */
  --border:            #000000;   /* every 1px line */
  --section-header:    #C0C0C0;   /* gray section header bg */

  --text-primary:      #000000;
  --text-secondary:    #555555;
  --text-tertiary:     #888888;

  --accent:            #000000;   /* primary button bg */
  --accent-light:      #333333;
  --accent-fg:         var(--bg); /* text on accent = inverted */

  /* -- Chromium silver V2 (light-mode-only experimental gradient stops) --- */
  --chr-bg-top:        #ECECEC;
  --chr-bg-15:         #DEDEDE;
  --chr-bg-35:         #D0D0D0;
  --chr-bg-55:         #C2C2C2;
  --chr-bg-75:         #B8B8B8;
  --chr-bg-bottom:     #AEAEAE;
  --chr-card-top:      #F0F0F0;
  --chr-card-mid:      #DBDBDB;
  --chr-card-bottom:   #CCCCCC;
  --chr-elev-top:      #FAFAFA;
  --chr-elev-mid:      #E8E8E8;
  --chr-elev-bottom:   #DCDCDC;
  --chr-section-top:   #C8C8C8;
  --chr-section-bot:   #A8A8A8;
  --chr-border:        rgba(0, 0, 0, 0.55);

  /* -- Phase colors (small indicators only — NEVER full backgrounds) ------ */
  --phase-base:        #4A6FA5;   /* steel blue */
  --phase-pace:        #5A8C5A;   /* sage green */
  --phase-accelerate:  #C47A30;   /* rust orange */
  --phase-prime:       #7A5CA0;   /* dusty purple */
  --phase-race:        #B84040;   /* brick red */

  /* -- Status (functional, desaturated) ----------------------------------- */
  --success:           #3A7A3A;
  --warning:           #8A7A20;
  --error:             #8A2020;

  /* -- Training status (Muted Retrofuturism) ------------------------------ */
  --status-excessive:    #E05555;
  --status-optimized:    #4ECDC4;
  --status-maintaining:  #D4A845;
  --status-resuming:     #9B8EC0;
  --status-decreasing:   #555555;
  --status-tracking:     #888888;

  /* -- PR glow tiers (absolute) ------------------------------------------- */
  --pr-gold:    #D4A845;
  --pr-silver:  #C0C0C0;
  --pr-bronze:  #CD7F32;

  /* -- Share-card accents (Retro-Futurism, absolute) ---------------------- */
  --rf-teal:    #4ECDC4;
  --rf-gold:    #D4A845;
  --rf-red:     #E05555;
  --rf-violet:  #9B8EC0;

  /* -- HR zones (6-zone model, fixed) ------------------------------------- */
  --hr-z1: #2196F3;  --hr-z2: #4CAF50;  --hr-z3: #8BC34A;
  --hr-z4: #FFC107;  --hr-z5: #FF9800;  --hr-z6: #F44336;

  /* -- Spacing (12pt base) ------------------------------------------------ */
  --space-xs:  4px;
  --space-sm:  6px;
  --space-sm2: 8px;
  --space-md:  12px;
  --space-lg:  24px;
  --space-xl:  36px;
  --space-xxl: 48px;

  /* -- Geometry ----------------------------------------------------------- */
  --radius:        0;     /* PROTOCOL: zero everywhere. */
  --border-width:  1px;

  /* -- Typography --------------------------------------------------------- */
  /* Apple devices fall through to SF Pro (system); other platforms use Inter. */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
               "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Menlo", "Consolas",
               monospace;

  /* Type ramp (exact iOS values, scaled 1pt → 1px on web) */
  --fs-large-title: 34px;
  --fs-title:       28px;
  --fs-title2:      22px;
  --fs-title3:      20px;
  --fs-title-sm:    16px;
  --fs-headline:    15px;
  --fs-subhead:     14px;
  --fs-body:        13px;
  --fs-footnote:    11px;
  --fs-label:       11px;

  --fs-stat-large:  48px;
  --fs-stat-medium: 32px;
  --fs-stat-small:  20px;

  --tracking-label:  0.5px;
  --tracking-button: 1px;
}

/* -- Dark mode override --------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root.auto, :root[data-theme="auto"] {
    --bg:               #0A0A0A;
    --surface:          #181818;
    --surface-elevated: #202020;
    --border:           #3A3A3A;
    --section-header:   #242424;
    --text-primary:     #D6D6D6;
    --text-secondary:   #999999;
    --text-tertiary:    #787878;
    --accent:           #D6D6D6;
    --accent-light:     #AAAAAA;
    --accent-fg:        #0A0A0A;
    --chr-border:       #3A3A3A;
  }
}

/* Explicit dark theme (toggleable) */
:root[data-theme="dark"] {
  --bg:               #0A0A0A;
  --surface:          #181818;
  --surface-elevated: #202020;
  --border:           #3A3A3A;
  --section-header:   #242424;
  --text-primary:     #D6D6D6;
  --text-secondary:   #999999;
  --text-tertiary:    #787878;
  --accent:           #D6D6D6;
  --accent-light:     #AAAAAA;
  --accent-fg:        #0A0A0A;
  --chr-border:       #3A3A3A;
}

/* ==========================================================================
   SEMANTIC ELEMENT STYLES
   ========================================================================== */

html, body {
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
}

/* Headings — bold, never rounded, default SF design */
h1, .h1, .large-title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-large-title);
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 0;
  color: var(--text-primary);
}
h2, .h2, .title {
  font-weight: 700; font-size: var(--fs-title);
  letter-spacing: -0.005em; line-height: 1.15; margin: 0;
}
h3, .h3, .title2 { font-weight: 700; font-size: var(--fs-title2); line-height: 1.2; margin: 0; }
h4, .h4, .title3 { font-weight: 700; font-size: var(--fs-title3); line-height: 1.25; margin: 0; }
h5, .h5, .headline { font-weight: 700; font-size: var(--fs-headline); margin: 0; }

p, .body {
  font-size: var(--fs-body);
  font-weight: 400;
  color: var(--text-primary);
  margin: 0;
}

.subhead   { font-size: var(--fs-subhead);  font-weight: 400; color: var(--text-secondary); }
.footnote  { font-size: var(--fs-footnote); font-weight: 400; color: var(--text-secondary); }

/* PROTOCOL LABEL — uppercase, 0.5 tracking, secondary color, 11pt bold */
.protocol-label, .label {
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-secondary);
}

/* Stats: ALWAYS monospaced bold. */
.stat-large, .stat-l {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-stat-large);
  letter-spacing: -0.01em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.stat-medium, .stat-m {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-stat-medium);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.stat-small, .stat-s {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-stat-small);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

/* Inline code / mono runs */
code, kbd, samp, .mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
}

/* ==========================================================================
   FOUNDATIONAL UTILITY CLASSES
   ========================================================================== */

.protocol-border     { border: var(--border-width) solid var(--border); }
.protocol-card       { background: var(--surface); border: var(--border-width) solid var(--border); padding: var(--space-md); }
.protocol-elevated   { background: var(--surface-elevated); border: var(--border-width) solid var(--border); padding: var(--space-md); }

.section-header {
  background: var(--section-header);
  border: var(--border-width) solid var(--border);
  font-size: var(--fs-headline);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-primary);
  padding: 8px var(--space-md);
}

/* Buttons (CSS-only, mirrors .primaryButton() / .secondaryButton() modifiers) */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-sans);
  font-size: var(--fs-headline);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-button);
  border: var(--border-width) solid var(--border);
  cursor: pointer;
  user-select: none;
  background: var(--accent);
  color: var(--accent-fg);
  padding: 20px var(--space-lg);
  border-radius: 0;
  transition: opacity 120ms ease;
}
.btn:hover  { opacity: 0.85; }
.btn:active { opacity: 0.7; }

.btn--secondary {
  background: var(--surface);
  color: var(--text-primary);
  padding: 16px var(--space-lg);
}

.btn--full { width: 100%; }

/* Blinking terminal cursor — replaces any spinner */
.cursor {
  display: inline-block;
  width: 0.55em;
  height: 1em;
  background: currentColor;
  vertical-align: -0.12em;
  margin-left: 2px;
  animation: cursor-blink 1.2s ease-in-out infinite;
}
.cursor--underscore {
  background: transparent;
  width: auto; height: auto;
}
.cursor--underscore::before { content: "_"; }

@keyframes cursor-blink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .cursor { animation: none; opacity: 1; }
}

/* Chromium V2 background (light only) */
.chromium-bg {
  background: linear-gradient(
    to bottom,
    var(--chr-bg-top) 0%,
    var(--chr-bg-15) 15%,
    var(--chr-bg-35) 35%,
    var(--chr-bg-55) 55%,
    var(--chr-bg-75) 75%,
    var(--chr-bg-bottom) 100%
  );
}
.chromium-card {
  background: linear-gradient(135deg, var(--chr-card-top), var(--chr-card-mid), var(--chr-card-bottom));
  border: var(--border-width) solid var(--chr-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -1px 0 rgba(0,0,0,0.04);
}

/* PR glow */
.pr-glow-gold   { box-shadow: 0 0 30px rgba(212, 168, 69, 0.5); }
.pr-glow-silver { box-shadow: 0 0 30px rgba(192, 192, 192, 0.5); }
.pr-glow-bronze { box-shadow: 0 0 30px rgba(205, 127, 50, 0.5); }

/* CRT scanlines overlay (for dark share cards) */
.scanlines {
  position: relative;
}
.scanlines::after {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.04) 0,
    rgba(255,255,255,0.04) 1px,
    transparent 1px,
    transparent 3px
  );
  pointer-events: none;
}