/* ============================================================
   OMERTA · DESIGN TOKENS
   Extracted verbatim from Omerta.dc.html (inline styles +
   renderVals, lines 614-754). Neo-noir mafia identity.
   Source of truth for colors, type, spacing, radius, shadow,
   motion. Do not hardcode hex values elsewhere — reference
   these custom properties.
   ============================================================ */

/* ---- Font loading (Google Fonts) ------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500;1,600&family=Barlow+Semi+Condensed:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ========== CORE PALETTE (semantic role names) ========== */
  --bg-obsidian:    #0a0806; /* base app background            */
  --surface-ember:  #15120c; /* raised panel top gradient stop */
  --surface-deep:   #100d08; /* panel bottom gradient stop     */
  --surface-void:   #0b0906; /* deepest recessed surface       */
  --surface-input:  #0d0b07; /* form field background          */
  --surface-inset:  #0e0c08; /* inset tiles / list rows        */
  --surface-scroll: #0c0a07; /* scrollbar track                */

  --gold:           #c8a24a; /* aged gold — borders, accents   */
  --gold-bright:    #e6c66a; /* bright gold — emphasis text    */
  --gold-hi:        #d8b656; /* gradient highlight (btn top)   */
  --gold-lo:        #a8842e; /* gradient shadow  (btn bottom)  */
  --blood:          #c8324a; /* danger / enemy                 */
  --blood-lo:       #8a1f30; /* danger gradient bottom         */
  --blood-soft:     #e08497; /* blood text on dark             */
  --bone:           #e8e1d0; /* primary light text token       */
  --emerald:        #3fae6b; /* success / online               */
  --emerald-soft:   #5cc98a; /* success text/bar fill          */
  --sky:            #8fc0e6; /* info / will accent             */
  --sky-mid:        #6ea8d8; /* Volkoff family accent          */

  /* ========== TEXT TONAL SCALE (#f2ecdd -> #5f5847) ======== */
  --text-100: #f2ecdd; /* headings, high emphasis             */
  --text-200: #ece5d6; /* body default                        */
  --text-300: #e2dbca; /* table cells                         */
  --text-400: #d8d1c0; /* notification body                   */
  --text-500: #cabfa6; /* mono values, secondary              */
  --text-600: #a99f8b; /* muted body                          */
  --text-700: #766c58; /* labels, captions, disabled-ish      */
  --text-800: #5f5847; /* faintest — hashes, ghost            */

  /* ========== FAMILY ACCENT COLORS ======================== */
  --fam-moretti:   #c9a13a; /* Casa Moretti   */
  --fam-volkoff:   #6ea8d8; /* Volkoff Bratva */
  --fam-karayilan: #2fae74; /* Kara Yılan     */
  --fam-founders:  #c8324a; /* The Founders   */
  --fam-kuro:      #8b6bd4; /* Kuro Ryu       */

  /* ========== ALPHA SCALE (gold hairlines & washes) ======= */
  --gold-a04: rgba(200,162,74,.04);
  --gold-a06: rgba(200,162,74,.06);
  --gold-a08: rgba(200,162,74,.08);
  --gold-a10: rgba(200,162,74,.10);
  --gold-a12: rgba(200,162,74,.12);
  --gold-a14: rgba(200,162,74,.14);
  --gold-a16: rgba(200,162,74,.16);
  --gold-a18: rgba(200,162,74,.18);
  --gold-a20: rgba(200,162,74,.20);
  --gold-a22: rgba(200,162,74,.22);
  --gold-a28: rgba(200,162,74,.28);
  --gold-a30: rgba(200,162,74,.30);
  --gold-a35: rgba(200,162,74,.35);
  --gold-a45: rgba(200,162,74,.45);

  --white-a02: rgba(255,255,255,.02);
  --white-a03: rgba(255,255,255,.03);
  --white-a05: rgba(255,255,255,.05);
  --white-a08: rgba(255,255,255,.08);
  --white-a10: rgba(255,255,255,.10);
  --black-a50: rgba(0,0,0,.5);

  --emerald-a40: rgba(63,174,107,.40);
  --blood-a20:   rgba(200,50,74,.20);

  --track: #241f16; /* stat-bar / progress track */

  /* ========== TYPOGRAPHY — ROLES ========================== */
  --font-display: 'Cinzel', serif;                       /* wordmark / headings / crests */
  --font-accent:  'Cormorant Garamond', serif;           /* italic editorial accent      */
  --font-ui:      'Barlow Semi Condensed', system-ui, sans-serif; /* UI / body / data    */
  --font-mono:    'JetBrains Mono', monospace;            /* numbers / timers / hashes    */

  /* ========== TYPE SIZE SCALE ============================= */
  --fs-2xs:  8px;
  --fs-xs:   9px;
  --fs-sm:   10px;
  --fs-base: 11px;
  --fs-md:   12px;
  --fs-lg:   13px;
  --fs-xl:   15px;
  --fs-2xl:  16px;
  --fs-3xl:  20px;
  --fs-4xl:  24px;
  --fs-5xl:  28px;
  --fs-6xl:  40px;
  --fs-hero: clamp(56px, 7vw, 104px);

  /* letter-spacing tokens */
  --ls-tight: .02em;
  --ls-ui:    .08em;
  --ls-label: .14em;
  --ls-wide:  .18em;
  --ls-mono:  .22em;
  --ls-hero:  .24em;

  /* ========== SPACING SCALE (4px base) ==================== */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  30px;
  --sp-8:  34px;
  --sp-9:  48px;

  /* ========== RADIUS (sharp neo-noir language 2-6px) ====== */
  --r-xs: 2px;
  --r-sm: 3px;
  --r-md: 4px;
  --r-lg: 5px;
  --r-xl: 6px;
  --r-pill: 30px;
  --r-round: 50%;

  /* ========== SHADOWS ===================================== */
  --shadow-panel:  0 30px 80px -30px #000, inset 0 1px 0 var(--white-a03);
  --shadow-card:   inset 0 1px 0 var(--white-a03);
  --shadow-hud:    0 10px 30px -18px #000;
  --shadow-toast:  0 18px 50px -14px #000;
  --shadow-float:  0 18px 50px -14px #000;
  --shadow-btn:    0 8px 26px -8px rgba(200,162,74,.65);
  --shadow-btn-sm: 0 6px 20px -8px rgba(200,162,74,.70);
  --glow-gold:     0 0 18px -4px rgba(200,162,74,.5);
  --glow-gold-lg:  0 0 30px 2px rgba(200,162,74,.75);

  /* ========== LAYOUT METRICS ============================== */
  --sidebar-w:        240px;
  --sidebar-collapsed: 64px;
  --hud-h:            56px;
  --content-max:      1560px;

  /* ========== Z-INDEX ==================================== */
  --z-hud:     50;
  --z-grain:   60;
  --z-sidebar: 55;
  --z-toast:   90;

  /* ========== MOTION ===================================== */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur-fast: .18s;
  --dur:      .3s;
  --dur-slow: .6s;
}

/* ============================================================
   KEYFRAMES (ported from Omerta.dc.html lines 22-28)
   ============================================================ */
@keyframes omPulse { 0%,100%{opacity:.9;transform:scale(1)} 50%{opacity:.4;transform:scale(1.25)} }
@keyframes omBlink { 0%,100%{opacity:1} 50%{opacity:.25} }
@keyframes omSpin  { to{transform:rotate(360deg)} }
@keyframes omShake { 0%,100%{transform:translateY(0) rotate(0)} 25%{transform:translateY(-3px) rotate(-4deg)} 75%{transform:translateY(3px) rotate(4deg)} }
@keyframes omGrain { 0%{transform:translate(0,0)} 10%{transform:translate(-4%,-4%)} 30%{transform:translate(3%,-6%)} 50%{transform:translate(-5%,4%)} 70%{transform:translate(4%,5%)} 90%{transform:translate(-3%,-2%)} }
@keyframes omFloat { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
@keyframes omGlow  { 0%,100%{box-shadow:var(--glow-gold)} 50%{box-shadow:var(--glow-gold-lg)} }

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}