/* Adrenaline Realm — iOS design tokens
   Source: Adrenaline-Realm/adrenaline-realm-ios @ 3f0984d
   (source file named on every value in the task brief).
   Every public page loads this file. Do not hardcode these colors elsewhere. */

:root {
  /* Brand */
  --ar-accent: #FF5F1F;              /* ARTokens.swift AR.Brand.accent; AccentColor.colorset */
  --ar-accent-secondary: #FF3131;    /* AR.Brand.accentSecondary (sparingly) */
  --ar-accent-soft: #FF914D;         /* AR.Brand.accentSoft (highlights only) */
  --ar-amber: #E8A54B;               /* AR.SearchFocusAura.amber (gradient stop only, never a fill) */
  --ar-charcoal: #2B2D31;            /* AR.Brand.charcoal */
  --ar-on-accent: #FFFFFF;
  --ar-icon-field: #000000;          /* app-icon field ONLY; never a page color */
  /* Brand gradient = app accent stack (red → orange → apricot).
     Same stops as branding.html; used for hero CTAs, CTA strokes, underlines (R12).
     Do NOT use --ar-amber here — that is SearchFocusAura only. */
  --ar-gradient-brand: linear-gradient(135deg, #FF3131 0%, #FF5F1F 48%, #FF914D 100%);
  --ar-clutch-start: #FFA23A; --ar-clutch-mid: #FF5F1F; --ar-clutch-end: #E3262B;
  --ar-gradient-clutch: linear-gradient(90deg, #FFA23A 0%, #FF5F1F 50%, #E3262B 100%); /* @clutch + Marketplace; no glow/shadow */
  --ar-hashtag-blue: #4B8DF8; --ar-hashtag-violet: #9B6DFF;
  --ar-gradient-hashtag: linear-gradient(90deg, #4B8DF8 0%, #9B6DFF 100%); /* never orange */
  --ar-gradient-sheen: linear-gradient(135deg, #FF3131 0%, #FF5F1F 48%, #FF914D 100%); /* splash sheen; never a flat fill */

  /* Typography: iOS ships SF Pro system only; SF Pro can't be self-hosted, so use the system stack */
  --ar-font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ar-font-marketing: var(--ar-font-sans); /* same system stack; display faces are not loaded */
  --ar-text-large-title: 700 34px/41px var(--ar-font-sans);
  --ar-text-title: 700 22px/28px var(--ar-font-sans);
  --ar-text-username: 600 20px/25px var(--ar-font-sans);
  --ar-text-headline: 600 17px/22px var(--ar-font-sans);
  --ar-text-body: 400 17px/22px var(--ar-font-sans);
  --ar-text-callout: 400 16px/21px var(--ar-font-sans);
  --ar-text-footnote: 400 13px/18px var(--ar-font-sans);
  --ar-text-caption: 400 12px/16px var(--ar-font-sans);

  /* Radii */
  --ar-radius-md: 12px; --ar-radius-lg: 14px; --ar-radius-xl: 16px;
  --ar-radius-tile-marketplace: 10px; --ar-radius-pill: 9999px;

  /* Spacing */
  --ar-space-xs: 4px; --ar-space-sm: 8px; --ar-space-md: 16px; --ar-space-lg: 24px; --ar-space-xl: 32px;
  --ar-space-card-vertical: 12px; --ar-space-tile-gap: 5px;

  /* Strokes / sizes */
  --ar-stroke-hairline: 1px; --ar-stroke-aura: 1.5px; --ar-underline-lane: 2px; --ar-page-dot: 6px;
  --ar-hit-min: 44px; --ar-avatar-feed: 40px; --ar-avatar-inbox: 44px; --ar-media-max-height: 480px;
  --ar-marketplace-tile-aspect: 4 / 5;

  /* Glass (blur values APPROX web equivalents of iOS materials; 0.42 overlay and 0.32/5px halo exact) */
  --ar-glass-blur-ultrathin: blur(20px) saturate(180%);
  --ar-glass-blur-regular: blur(30px) saturate(180%);
  --ar-glass-light-overlay: rgba(255, 255, 255, 0.42);
  --ar-glass-caption-rule-opacity: 0.65;
  --ar-aura-halo-dark: 0 0 5px rgba(255, 95, 31, 0.32);

  /* Motion */
  --ar-motion-tab: 180ms ease-in-out; --ar-motion-sheet: 220ms ease-in-out; --ar-motion-media-fade: 250ms ease-out;
  --ar-pressed-opacity: 0.85;
}

:root,
[data-theme="light"] {
  color-scheme: light;
  --ar-bg: #FFFFFF; --ar-bg-secondary: #FAFAFA; --ar-surface: #FFFFFF;
  --ar-text: #101114; --ar-text-secondary: #3F3F46;
  --ar-divider: rgba(16, 17, 20, 0.08); --ar-border: #E5E7EB; --ar-chip-border: #3F3F46;
  --ar-field-bg: #FAFAFA; --ar-chrome-well: #2B2D31; --ar-floating-hairline: rgba(16, 17, 20, 0.22);
  --ar-letterbox: #0B0B0D;
  --ar-glass-fill: var(--ar-glass-light-overlay); --ar-glass-backdrop: var(--ar-glass-blur-regular);
  --ar-aura-halo: none; --ar-tab-idle: #2B2D31; --ar-tab-selected: #101114;
}

/* html[] raises specificity above per-page :root blocks that repeat --ar-text. */
html[data-theme="dark"] {
  color-scheme: dark;
  --ar-bg: #0B0B0D; --ar-bg-secondary: #151517; --ar-surface: #151517;
  --ar-text: #FFFFFF; --ar-text-secondary: #A1A1AA;
  --ar-divider: #27272A; --ar-border: #27272A; --ar-chip-border: #27272A;
  --ar-field-bg: #151517; --ar-chrome-well: #151517; --ar-floating-hairline: #27272A;
  --ar-letterbox: #0B0B0D;
  --ar-glass-fill: rgba(21, 21, 23, 0.55); --ar-glass-backdrop: var(--ar-glass-blur-ultrathin);
  --ar-aura-halo: var(--ar-aura-halo-dark); --ar-tab-idle: #A1A1AA; --ar-tab-selected: #FFFFFF;
}

@media (prefers-color-scheme: dark) {
  html:root:not([data-theme="light"]) {
    color-scheme: dark;
    --ar-bg: #0B0B0D; --ar-bg-secondary: #151517; --ar-surface: #151517;
    --ar-text: #FFFFFF; --ar-text-secondary: #A1A1AA;
    --ar-divider: #27272A; --ar-border: #27272A; --ar-chip-border: #27272A;
    --ar-field-bg: #151517; --ar-chrome-well: #151517; --ar-floating-hairline: #27272A;
    --ar-letterbox: #0B0B0D;
    --ar-glass-fill: rgba(21, 21, 23, 0.55); --ar-glass-backdrop: var(--ar-glass-blur-ultrathin);
    --ar-aura-halo: var(--ar-aura-halo-dark); --ar-tab-idle: #A1A1AA; --ar-tab-selected: #FFFFFF;
  }
}

@media (prefers-reduced-transparency: reduce) {
  :root { --ar-glass-fill: var(--ar-surface); --ar-glass-backdrop: none; }
}