/* ECEUH design tokens — ported 1:1 from the iOS app design system
   (ECEUH-IOS: DesignSystem/Theme.swift, Tokens.swift, Typography.swift).
   Dark is the default (:root); html.light overrides. */

:root {
  /* Surfaces */
  --ee-bg: #000000;
  --ee-bg-elev: #1C1C1E;
  --ee-bg-card: #1C1C1E;
  --ee-bg-raised: #2C2C2E;

  /* Text */
  --ee-text: #FFFFFF;
  --ee-text-muted: #AEAEB2;
  --ee-text-dim: #8E8E93;
  --ee-text-faint: #636366;

  /* Accent (scarlet) */
  --ee-accent: #EC1B34;
  --ee-on-accent: #FFFFFF;
  --ee-accent-tint: rgba(236, 27, 52, 0.16);
  --ee-accent-line: rgba(236, 27, 52, 0.34);
  /* Small accent text only. #EC1B34 measures 3.87:1 on --ee-bg-card and
     3.17:1 on --ee-bg-raised — both under the AA 4.5:1 floor. This lighter
     scarlet (already in the palette as AvatarPalette's first stop) clears it
     everywhere: 7.64:1 on bg, 6.19:1 on cards, 5.07:1 on raised. Use it for
     kickers, eyebrows, and any accent text below 18px. */
  --ee-accent-text: #FF6B7A;

  /* Segmented control: the selected thumb must read as raised, i.e. lighter
     than its track in dark and lighter (white) than its track in light. The
     two themes want opposite tokens, so they are named rather than inlined. */
  --ee-seg-track: #1C1C1E;
  --ee-seg-thumb: #2C2C2E;

  /* Lines */
  --ee-border: rgba(255, 255, 255, 0.10);
  --ee-border-strong: rgba(255, 255, 255, 0.16);
  --ee-sep: rgba(255, 255, 255, 0.08);

  /* File types + status */
  --ee-quiz: #FF5161;
  --ee-exam: #F59E0B;
  --ee-homework: #34D399;
  --ee-classwork: #3B82F6;
  --ee-lab: #A855F7;
  --ee-reference: #AEAEB2;
  --ee-good: #34D399;
  --ee-warn: #FBBF24;
  --ee-blue: #3B82F6;

  /* Gradients */
  --ee-accent-grad: linear-gradient(135deg, #FF4D5C, #EC1B34, #B0122A);
  --ee-brand-grad: linear-gradient(135deg, #FF4D5C, #B0122A, #3A060D);
  --ee-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 50%);
  --ee-red-card-grad: linear-gradient(135deg, #A8182E, #520C18, #130307);
  --ee-blue-card-grad: linear-gradient(135deg, #2A5FCF, #143A86, #070F22);
  --ee-cover-fallback: linear-gradient(180deg, #7A0A16, #000000);

  /* Radii */
  --ee-r-sm: 10px;
  --ee-r-md: 14px;
  --ee-r-lg: 18px;
  --ee-r-card: 22px;
  --ee-r-xl: 28px;

  /* Spacing */
  --ee-gutter: 16px;
  --ee-inset: 20px;

  /* Shadows */
  --ee-shadow-card: 0 14px 44px rgba(0, 0, 0, 0.55);
  --ee-glow-accent: 0 8px 24px rgba(236, 27, 52, 0.4);

  /* Fonts — native stacks (SF Pro / SF Mono / New York on Apple devices) */
  --ee-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ee-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --ee-serif: ui-serif, "New York", Georgia, "Times New Roman", serif;
}

html.light {
  --ee-bg: #F2F2F7;
  --ee-bg-elev: #FFFFFF;
  --ee-bg-card: #FFFFFF;
  --ee-bg-raised: #E5E5EA;

  --ee-text: #000000;
  --ee-text-muted: #6C6C70;
  --ee-text-dim: #8E8E93;
  --ee-text-faint: #AEAEB2;

  --ee-accent: #D81B2E;
  /* 4.57:1 on the light background, 5.10:1 on cards — already clears AA, so
     small accent text keeps the full-strength accent here. */
  --ee-accent-text: #D81B2E;
  --ee-accent-tint: rgba(216, 27, 46, 0.10);
  --ee-accent-line: rgba(216, 27, 46, 0.26);

  --ee-seg-track: #E5E5EA;
  --ee-seg-thumb: #FFFFFF;

  --ee-border: rgba(0, 0, 0, 0.10);
  --ee-border-strong: rgba(0, 0, 0, 0.16);
  --ee-sep: rgba(60, 60, 67, 0.18);

  --ee-exam: #B27A00;
  --ee-good: #15803D;
  --ee-warn: #B45309;

  --ee-shadow-card: 0 14px 44px rgba(0, 0, 0, 0.12);
  --ee-glow-accent: 0 8px 24px rgba(216, 27, 46, 0.28);
}

/* ── Legacy variable shims ─────────────────────────────────────────────
   Older shared/inline CSS still reads --eceuh-* and --cp-*. Alias them to
   the new tokens so every page inherits the iOS palette immediately. */
:root, html.light {
  --eceuh-serif: var(--ee-serif);
  --eceuh-sans: var(--ee-sans);
  --eceuh-mono: var(--ee-mono);
  --eceuh-accent: var(--ee-accent);
  --eceuh-accent-deep: #B0122A;
  --eceuh-bg: var(--ee-bg);
  --eceuh-text: var(--ee-text);
  --eceuh-muted: var(--ee-text-muted);
  --eceuh-dim: var(--ee-text-dim);
  --eceuh-active: var(--ee-bg-raised);
  --eceuh-border: var(--ee-border);
  --eceuh-border-2: var(--ee-border-strong);

  --cp-bg: var(--ee-bg);
  --cp-panel: var(--ee-bg-card);
  --cp-panel-2: var(--ee-bg-raised);
  --cp-border: var(--ee-border);
  --cp-border-strong: var(--ee-border-strong);
  --cp-accent: var(--ee-accent);
  --cp-accent-deep: #B0122A;
  --cp-text: var(--ee-text);
  --cp-text-soft: var(--ee-text-muted);
  --cp-text-muted: var(--ee-text-muted);
  --cp-text-dim: var(--ee-text-dim);
  --cp-shadow: var(--ee-shadow-card);
  --cp-shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.35);
  --cp-serif: var(--ee-serif);
  --cp-sans: var(--ee-sans);
  --cp-mono: var(--ee-mono);
}
html.light {
  --cp-shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.08);
}

/* ── Typography utilities (iOS text styles at default Dynamic Type) ── */
.t-large-title { font-size: 34px; line-height: 41px; font-weight: 800; letter-spacing: -0.4px; }
.t-title       { font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -0.3px; }
.t-title2      { font-size: 22px; line-height: 28px; font-weight: 800; letter-spacing: -0.2px; }
.t-title3      { font-size: 20px; line-height: 25px; font-weight: 700; }
.t-headline    { font-size: 17px; line-height: 22px; font-weight: 600; }
.t-body        { font-size: 17px; line-height: 22px; }
.t-subhead     { font-size: 15px; line-height: 20px; }
.t-footnote    { font-size: 13px; line-height: 18px; }
.t-caption     { font-size: 12px; line-height: 16px; }
.t-caption2    { font-size: 11px; line-height: 13px; }
.t-kicker {
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--ee-accent-text);
}
.t-mono { font-family: var(--ee-mono); }

/* ── Press feedback (iOS PressScaleStyle: 0.96 over 0.18s) ── */
@media (prefers-reduced-motion: no-preference) {
  .pressable { transition: transform 0.18s ease-out; }
  .pressable:active { transform: scale(0.96); }
}

/* ── Product site (index, support, privacy, 404) ──
   Scoped --site-* names so legacy --ee-* pages are unaffected.
   Contrast on --site-black: ink 18:1, muted 7.8:1, scarlet-text 7.1:1;
   black on scarlet 4.8:1 (K-map highlight). */
:root {
  --site-black: #000000;
  --site-ink: #f4f1f1;
  --site-muted: #a6a3a8;
  --site-white: #ffffff;
  --site-scarlet: #ec1b34;
  --site-scarlet-text: #ff6b79;
  --site-maroon-deep: #3a0a12;
  --site-maroon: #7a0f1f;
  --site-band-text: #f1dfe2;
  --site-band-edge: #d7a2aa;
  --site-rule: #2c2a2e;
  --site-rule-strong: #4a454b;
  --site-panel: #0f0d0e;
  --site-group: #1d0a0e;
  --site-r-xs: 8px;
  --site-r-sm: 10px;
  --site-r-md: 16px;
  --site-r-lg: 20px;
  --site-r-pill: 999px;
  --site-serif: "New York", ui-serif, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --site-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --site-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --site-measure: 68ch;
  --site-gutter: clamp(20px, 5vw, 48px);
}