/* ─── AIBBY BRAND TOKENS — single source of truth ─────────────────
 * Loaded by application, customer, and admin layouts.
 * Edit values here — do not redeclare in layout <style> blocks.
 *
 * v0.1.0 — Warm Dark palette (2026-05-12)
 * See DESIGN.md at repo root for the full spec, rationale, and machine-
 * enforced rules (especially the amber-must-have-dark-text rule).
 */

:root {
  /* ─── WARM DARK SURFACES ─────────────────────────────────────────
   * Warmer than typical navy dark. Background sits at ~7% lightness;
   * surface ramps lift each step ~3% with a warm RGB bias.
   */
  --bg:             #0F1117;   /* page background — warm near-black */
  --surface:        #1A1D24;   /* cards, modals, raised panels */
  --surface-muted:  #232730;   /* sidebars, alt rows, secondary panels */
  --surface-soft:   #2B2F39;   /* card hover state */
  --surface-deep:   #0A0D14;   /* terminal — deeper than bg */

  /* Legacy surface aliases (kept so existing custom.css keeps working) */
  --s1: var(--surface);
  --s2: var(--surface-muted);
  --s3: var(--surface-soft);
  --s4: #353A47;

  /* ─── INK / TEXT ─────────────────────────────────────────────────
   * Warm off-white as primary — NOT pure white. Easier on the eyes,
   * reads more premium, matches dark-mode tools like Plain/Cron/Linear.
   */
  --ink-primary:    #F2EFE7;   /* body text on dark */
  --ink-secondary:  #C9C5BC;   /* subhead gray, dim emphasis */
  --ink-muted:      #8A8B8E;   /* metadata, eyebrows */
  --ink-faint:      #5A5C62;   /* timestamps, dimmest text */

  /* Legacy text aliases */
  --t1: var(--ink-primary);
  --t2: var(--ink-secondary);
  --t3: var(--ink-muted);

  /* ─── BORDERS / HAIRLINES ────────────────────────────────────────
   * Warm-tinted by using the ink color at low opacity, not pure white.
   */
  --hairline:        rgba(242, 239, 231, 0.08);
  --hairline-strong: rgba(242, 239, 231, 0.14);
  --hairline-soft:   rgba(242, 239, 231, 0.04);

  /* Legacy border aliases */
  --b1: var(--hairline-soft);
  --b2: var(--hairline);
  --b3: var(--hairline-strong);

  /* ─── BRAND: SIGNAL AMBER ────────────────────────────────────────
   * THE accent. Used precious. Background-amber MUST have dark text
   * (--amber-on, never --ink-primary). See DESIGN.md amber-must-have
   * -dark-text rule.
   */
  --amber:          #E8A33A;
  --amber-on:       #1B1410;   /* dark text for amber backgrounds */
  --amber-d:        #C2891E;   /* deeper amber for hover/active */
  --amber-soft:     rgba(232, 163, 58, 0.20);   /* tint glows */
  --amber-faint:    rgba(232, 163, 58, 0.08);   /* badge backgrounds */
  --amber-glow:     rgba(232, 163, 58, 0.18);   /* large ambient glow */

  /* ─── SEMANTIC ───────────────────────────────────────────────────
   * All tuned warm to harmonize with warm-dark canvas.
   */
  --moss:           #4A9568;   /* success — warmer than neon green */
  --moss-on:        #0F1117;
  --moss-soft:      rgba(74, 149, 104, 0.20);
  --moss-light:     #6EE7B7;   /* for "Live" pill text on dark moss-tint */

  --brick:          #C9633F;   /* warm error — instead of cool red */
  --brick-on:       #F2EFE7;
  --brick-soft:     rgba(201, 99, 63, 0.18);

  --steel:          #6B8FB0;   /* muted info — instead of cool blue */
  --steel-on:       #0F1117;

  --warning:        #D48B22;   /* deep amber — caution */
  --warning-on:     #0F1117;   /* dark text — same as amber rule */

  /* Legacy semantic aliases */
  --green:    var(--moss);
  --red:      var(--brick);
  --sky:      var(--steel);
  --sky-d:    var(--steel);
  --sky-glow: var(--moss-soft);
  --indigo:   var(--steel);
  --violet:   var(--amber);
  --cyan:     var(--amber);
  --slate:    var(--ink-muted);

  /* ─── GRADIENTS ──────────────────────────────────────────────────
   * Amber-only gradients. No more cyan-blue-purple rainbow.
   */
  --gradient-cta:        linear-gradient(135deg, var(--amber) 0%, var(--amber-d) 100%);
  --gradient-amber-soft: linear-gradient(135deg, var(--amber-soft) 0%, var(--amber-faint) 100%);
  --gradient-hero-glow:  radial-gradient(circle, var(--amber-glow) 0%, transparent 60%);

  /* Legacy gradient aliases (NOTE: redirecting cyan-blue rainbow → amber) */
  --gradient-primary: var(--gradient-cta);
  --gradient-hero:    var(--gradient-cta);

  /* Legacy --color-* aliases for custom.css backward compat */
  --color-bg:           var(--bg);
  --color-surface:      var(--surface);
  --color-surface-2:    var(--surface-muted);
  --color-border:       var(--hairline-strong);
  --color-text:         var(--ink-primary);
  --color-text-muted:   var(--ink-muted);
  --color-accent-cyan:  var(--amber);          /* REMAPPED: cyan → amber */
  --color-accent-blue:  var(--amber);          /* REMAPPED: blue → amber */
  --color-accent-amber: var(--amber);
  --color-accent-orange: var(--amber-d);

  /* ─── LAYOUT TOKENS ──────────────────────────────────────────────*/
  --sb-open:    224px;
  --sb-closed:  64px;
  --sb-speed:   0.25s;
  --sb-ease:    cubic-bezier(0.4, 0, 0.2, 1);
  --topbar-h:   60px;

  /* ─── MOTION ─────────────────────────────────────────────────────*/
  --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);   /* default for marketing reveals */
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-exit:       cubic-bezier(0.6, 0, 0.8, 0.2);  /* letter-morph exit */
  --ease-decel:      cubic-bezier(0, 0, 0.2, 1);
  --ease-accel:      cubic-bezier(0.3, 0, 1, 1);

  --dur-fast:    100ms;
  --dur-default: 150ms;
  --dur-medium:  200ms;
  --dur-slow:    300ms;
  --dur-appear:  550ms;   /* hero animation phase */
  --dur-cine:    1400ms;
}

/* ─── GLOBAL CONTRAST FIXES ──────────────────────────────────────
 * Browser-default elements that default to white-on-white on dark.
 */
select option,
select optgroup {
  background-color: var(--surface);
  color: var(--ink-primary);
}
select option:checked,
select option:hover {
  background-color: var(--surface-soft);
  color: var(--ink-primary);
}

/* ─── GRAPH PAPER BACKGROUND ─────────────────────────────────────
 * Utility class for the hero (and any section that wants it).
 * Subtle warm gridlines on warm dark, masked to a radial gradient
 * so the grid fades toward the edges.
 */
.bg-graph {
  position: relative;
}
.bg-graph::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(242, 239, 231, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(242, 239, 231, 0.035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 70% at 30% 50%, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 30% 50%, black 30%, transparent 75%);
}

/* ─── AMBER GLOW UTILITY ─────────────────────────────────────────
 * Single-per-page ambient warm glow. Hero only.
 */
.bg-amber-glow {
  position: relative;
}
.bg-amber-glow::after {
  content: '';
  position: absolute;
  top: 35%;
  left: 28%;
  transform: translate(-50%, -50%);
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: var(--gradient-hero-glow);
  filter: blur(90px);
  z-index: 1;
  pointer-events: none;
  animation: bg-amber-pulse 6s ease-in-out infinite;
}
@keyframes bg-amber-pulse {
  0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.95); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.12); }
}

/* ─── THE QUARTET — TYPOGRAPHY TOKENS ────────────────────────────
 * Self-hosted via fonts.css (@font-face, woff2, app/assets/fonts/).
 * No CDN. Four families, four tiers — see DESIGN.md typography.
 *   --font-display : Fraunces      — hero, logo, top-of-page
 *   --font-section : Space Grotesk — h2/h3, section openers
 *   --font-sans    : Outfit        — body, UI, buttons, labels
 *   --font-mono    : Space Mono    — code, terminal, eyebrows
 */
:root {
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-section: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-sans:    'Outfit', system-ui, -apple-system, sans-serif;
  --font-mono:    'Space Mono', 'JetBrains Mono', 'Courier New', monospace;
}