/* ============================================================
   AETHER LIVE — Color & Type Foundations
   Immersive mobile live-streaming. Dark, video-first UI with
   translucent "glass" controls and a hot-pink LIVE accent.
   Derived from product screenshots (see README → Sources).
   ============================================================ */

:root {
  /* ---------- BRAND / ACCENT ---------- */
  --live: #F1356C;            /* the LIVE badge + record glyph — signature color */
  --live-press: #D62A5C;      /* pressed/darker live */
  --live-soft: rgba(241,53,108,0.16);

  /* ---------- SURFACES (the app is a dark shell behind video) ---------- */
  --ink-900: #000000;         /* status bar / true black edges */
  --ink-800: #0E0E10;         /* app chrome background */
  --ink-700: #141416;         /* bottom toolbar / sheets */
  --ink-600: #1C1C20;         /* raised surface */
  --ink-500: #2A2A30;         /* hairline-on-dark fills */

  /* ---------- GLASS (translucent overlays over live video) ---------- */
  --glass: rgba(18,18,22,0.46);        /* default control pill / circle */
  --glass-strong: rgba(0,0,0,0.55);    /* high-contrast chip over busy video */
  --glass-chip: rgba(0,0,0,0.42);      /* quick-reaction circles, join pills */
  --glass-border: rgba(255,255,255,0.14);
  --glass-blur: 18px;

  /* ---------- TEXT (almost always white, over video) ---------- */
  --fg1: #FFFFFF;                       /* primary text + icons */
  --fg2: rgba(255,255,255,0.72);        /* secondary / placeholder */
  --fg3: rgba(255,255,255,0.50);        /* tertiary / meta */
  --fg-onlight: #18181B;                /* text on white/light pills */

  /* ---------- REACTION PALETTE (floating hearts + emoji rail) ---------- */
  --react-red:    #FF3B5C;
  --react-pink:   #FF4D8D;
  --react-purple: #B14EEF;
  --react-orange: #FF9A3D;
  --react-amber:  #FFC23F;
  --react-deep:   #8E1F3A;   /* the dark maroon heart */

  /* ---------- TOP-FAN / BADGES ---------- */
  --fan-flame: #FF6B1A;      /* 🔥 top-fan flame tint */
  --fan-star:  #FFB020;      /* ⭐ top-fan star */

  /* ---------- RECORD RING (live broadcast button) ---------- */
  --ring-1: #FFD23F;
  --ring-2: #FF8A3D;
  --ring-3: #F1356C;
  --ring-4: #B14EEF;
  --record-ring: conic-gradient(from 210deg, var(--ring-1), var(--ring-2), var(--ring-3), var(--ring-4), var(--ring-1));

  /* ---------- PROTECTION GRADIENTS (keep white legible over video) ---------- */
  --scrim-top: linear-gradient(to bottom, rgba(0,0,0,0.55), rgba(0,0,0,0) 22%);
  --scrim-bottom: linear-gradient(to top, rgba(0,0,0,0.62), rgba(0,0,0,0) 38%);
  --scrim-chat: linear-gradient(to right, rgba(0,0,0,0.45), rgba(0,0,0,0) 80%);

  /* ============================================================
     TYPE — iOS system face (SF Pro). On Apple devices the
     -apple-system stack renders SF Pro natively; elsewhere it
     falls back to the platform UI font. See README → Type.
     ============================================================ */
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
             system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-num: "SF Pro Display", -apple-system, system-ui, sans-serif; /* tabular-ish counts */

  /* weights */
  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;

  /* ---------- TYPE SCALE (designed at 390pt mobile width) ---------- */
  --t-display: 600 28px/1.1 var(--font-ui);   /* big counts, hero numerals */
  --t-title:   600 17px/1.25 var(--font-ui);  /* broadcaster username (top bar) */
  --t-badge:   700 15px/1 var(--font-ui);     /* LIVE badge, emphasis pills */
  --t-body:    400 15px/1.3 var(--font-ui);   /* comment text, input */
  --t-name:    600 14px/1.25 var(--font-ui);  /* commenter username */
  --t-meta:    600 13px/1 var(--font-ui);     /* viewer count, chips */
  --t-label:   500 12px/1.1 var(--font-ui);   /* toolbar labels */
  --t-micro:   600 11px/1 var(--font-ui);     /* tiny badge text */

  /* letter spacing */
  --ls-tight: -0.01em;
  --ls-badge: 0.04em;   /* LIVE is slightly tracked + uppercase */

  /* ---------- RADII ---------- */
  --r-pill: 999px;       /* nearly every control is a pill or circle */
  --r-input: 22px;       /* comment field */
  --r-sheet: 28px;       /* bottom sheet / toolbar top corners */
  --r-card: 16px;
  --r-chip: 14px;

  /* ---------- SPACING (4pt base) ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

  /* ---------- ELEVATION ---------- */
  --shadow-pill: 0 2px 10px rgba(0,0,0,0.35);
  --shadow-sheet: 0 -8px 30px rgba(0,0,0,0.45);
  --shadow-glow-live: 0 0 18px rgba(241,53,108,0.55);

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);   /* iOS-style ease-out */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* gentle overshoot for reactions */
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-float: 3200ms;   /* heart rise duration */
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS — apply on the dark app shell
   ============================================================ */
.ae-app {
  font-family: var(--font-ui);
  color: var(--fg1);
  background: var(--ink-800);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.ae-display { font: var(--t-display); letter-spacing: var(--ls-tight); }
.ae-title   { font: var(--t-title); letter-spacing: var(--ls-tight); }
.ae-body    { font: var(--t-body); }
.ae-name    { font: var(--t-name); }
.ae-meta    { font: var(--t-meta); color: var(--fg2); }
.ae-label   { font: var(--t-label); }

.ae-badge-live {
  font: var(--t-badge);
  letter-spacing: var(--ls-badge);
  text-transform: uppercase;
  color: var(--fg1);
  background: var(--live);
  padding: 6px 12px;
  border-radius: var(--r-pill);
}

/* Translucent glass control (circle or pill) */
.ae-glass {
  background: var(--glass);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--r-pill);
}