/* ============================================================
   AVORA — FONTS (self-hosted woff2, extracted from design bundle)
   Display: Baloo 2 (chunky rounded) — logotype & big headings.
   UI: Fredoka (friendly rounded) — numbers, labels, buttons.
   Accent: Titan One — heavy display option.
   Baloo 2 / Fredoka are variable weight; one file per subset.
   NOTE: bundle ships latin + latin-ext subsets. Cyrillic (RU) falls
   back to the system rounded UI font (font-display: swap).
   ============================================================ */
@font-face {
  font-family: 'Baloo 2'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("../assets/fonts/baloo2-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Baloo 2'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("../assets/fonts/baloo2-latinext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fredoka'; font-style: normal; font-weight: 300 700; font-stretch: 100%; font-display: swap;
  src: url("../assets/fonts/fredoka-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fredoka'; font-style: normal; font-weight: 300 700; font-stretch: 100%; font-display: swap;
  src: url("../assets/fonts/fredoka-latinext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Titan One'; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/titanone-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Titan One'; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/titanone-latinext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================
   AVORA — COLOR TOKENS
   Premium cartoon-3D palette: royal purple base, golden
   highlights, candy accents, cream text.
   ============================================================ */
:root {
  /* Brand purple */
  --purple-100: #ECE6FB;
  --purple-200: #C9BCF0;
  --purple-300: #9E86E2;
  --purple-400: #825FD8;
  --purple-500: #6B4BCE;   /* core brand purple */
  --purple-600: #593CB0;
  --purple-700: #452C8C;
  --purple-800: #2E1E63;

  /* Deep violet backgrounds */
  --violet-night: #1A1330;
  --violet-abyss: #0E0A1F;
  --violet-panel: #221A3D;
  --violet-panel-2: #2A2150;

  /* Gold / yellow */
  --gold-100: #FFF0C2;
  --gold-300: #FFD866;
  --gold-400: #FFC93C;
  --gold-500: #F5B33C;
  --gold-600: #E0921C;
  --gold-700: #B96E10;

  /* Candy accents */
  --pink-500: #E86B9E;
  --pink-600: #D2477F;
  --orange-500: #F08A2C;
  --orange-600: #D46E14;

  /* Semantic status */
  --green-400: #5CE8AE;
  --green-500: #3DDC97;
  --green-600: #23B57A;
  --red-400: #FF6B6B;
  --red-500: #F0453E;
  --red-600: #C7302B;

  /* Stone / neutral */
  --stone-500: #3A3F52;
  --stone-600: #2B2F3D;
  --stone-700: #1E2230;

  /* Cream / text */
  --cream-050: #FFFFFF;
  --cream-100: #F4F1FB;
  --cream-300: #C4BCDD;
  --cream-500: #8E86A8;

  /* Semantic aliases */
  --bg-app: var(--violet-abyss);
  --bg-elevated: var(--violet-night);
  --surface-card: var(--violet-panel);
  --surface-card-2: var(--violet-panel-2);
  --surface-stone: var(--stone-600);

  --text-primary: var(--cream-100);
  --text-secondary: var(--cream-300);
  --text-muted: var(--cream-500);
  --text-on-gold: #3A1E00;
  --text-on-green: #06301E;

  --brand: var(--purple-500);
  --brand-strong: var(--purple-700);

  --action-play: var(--gold-500);
  --action-play-hi: var(--gold-400);
  --action-success: var(--green-500);
  --action-danger: var(--red-500);

  --accent-coin: var(--gold-500);
  --accent-xp: var(--gold-400);
  --accent-crystal: var(--purple-400);

  --border-gold: var(--gold-500);
  --border-violet: var(--purple-700);
  --hairline: rgba(244, 241, 251, 0.10);
}

/* ============================================================
   AVORA — TYPOGRAPHY TOKENS
   ============================================================ */
:root {
  --font-display: 'Baloo 2', 'Titan One', system-ui, sans-serif;
  --font-ui: 'Fredoka', system-ui, sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  --text-display-xl: 64px;
  --text-display-lg: 48px;
  --text-display-md: 34px;
  --text-display-sm: 26px;

  --text-xl: 22px;
  --text-lg: 18px;
  --text-md: 16px;
  --text-sm: 14px;
  --text-xs: 12px;

  --lh-tight: 1.02;
  --lh-snug: 1.15;
  --lh-normal: 1.4;

  --tracking-display: 0.01em;
  --tracking-label: 0.06em;
  --tracking-wide: 0.12em;

  --numeric-tabular: "tnum" 1, "lnum" 1;
}

/* ============================================================
   AVORA — SPACING, RADII & LAYOUT TOKENS (4px grid)
   ============================================================ */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --app-width: 390px;
  --app-max: 440px;
  --gutter: 16px;
  --navbar-height: 96px;   /* floating bar footprint (bar height + bottom margin) for footer clearance */
  --hit-target-min: 44px;

  --border-1: 1px;
  --border-2: 2px;
  --border-3: 3px;
}

/* ============================================================
   AVORA — EFFECTS: shadows, glows, gradients, 3D borders
   ============================================================ */
:root {
  --shadow-sm: 0 2px 6px rgba(6, 4, 16, 0.35);
  --shadow-md: 0 6px 18px rgba(6, 4, 16, 0.45);
  --shadow-lg: 0 14px 34px rgba(6, 4, 16, 0.55);
  --shadow-float: 0 22px 48px rgba(6, 4, 16, 0.6);

  --shadow-card:
    0 10px 26px rgba(6, 4, 16, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);

  --glow-gold: 0 0 20px rgba(255, 201, 60, 0.55);
  --glow-purple: 0 0 22px rgba(107, 75, 206, 0.6);
  --glow-green: 0 0 20px rgba(61, 220, 151, 0.55);
  --glow-pink: 0 0 18px rgba(232, 107, 158, 0.5);
  --glow-red: 0 0 24px rgba(240, 69, 62, 0.6);

  --bevel-gold:
    inset 0 2px 0 rgba(255, 255, 255, 0.55),
    inset 0 -4px 0 rgba(185, 110, 16, 0.9),
    0 6px 0 var(--gold-700),
    0 10px 18px rgba(6, 4, 16, 0.5);
  --bevel-green:
    inset 0 2px 0 rgba(255, 255, 255, 0.4),
    inset 0 -4px 0 rgba(35, 181, 122, 0.9),
    0 6px 0 var(--green-600),
    0 10px 18px rgba(6, 4, 16, 0.5);
  --bevel-purple:
    inset 0 2px 0 rgba(255, 255, 255, 0.25),
    inset 0 -4px 0 rgba(46, 30, 99, 0.95),
    0 6px 0 var(--purple-800),
    0 10px 18px rgba(6, 4, 16, 0.5);

  --grad-gold: linear-gradient(180deg, var(--gold-400) 0%, var(--gold-500) 55%, var(--gold-600) 100%);
  --grad-purple: linear-gradient(180deg, var(--purple-400) 0%, var(--purple-500) 55%, var(--purple-600) 100%);
  --grad-green: linear-gradient(180deg, var(--green-400) 0%, var(--green-500) 60%, var(--green-600) 100%);
  --grad-card: linear-gradient(180deg, var(--violet-panel-2) 0%, var(--violet-panel) 100%);
  --grad-danger: linear-gradient(180deg, var(--red-400) 0%, var(--red-500) 60%, var(--red-600) 100%);

  --grad-sky-dusk: linear-gradient(180deg, #3A2668 0%, #6B4BCE 34%, #B0609E 62%, #F08A2C 100%);
  --grad-bg-app: radial-gradient(120% 90% at 50% 0%, var(--violet-night) 0%, var(--violet-abyss) 70%);

  --text-3d-gold:
    0 1px 0 var(--gold-300),
    0 2px 0 var(--gold-600),
    0 3px 0 var(--purple-700),
    0 5px 0 var(--purple-800),
    0 7px 10px rgba(6, 4, 16, 0.6);
  --text-3d-soft:
    0 2px 0 var(--purple-700),
    0 4px 8px rgba(6, 4, 16, 0.55);

  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
}

/* ============================================================
   AVORA — base resets + reusable brand utility classes
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

.avora-num { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: var(--numeric-tabular); }

.avora-logotype {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  color: var(--cream-100);
  letter-spacing: var(--tracking-display);
  text-shadow: var(--text-3d-gold);
  -webkit-text-stroke: 1.5px var(--gold-600);
  line-height: var(--lh-tight);
}
.avora-heading {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--cream-100);
  text-shadow: var(--text-3d-soft);
  line-height: var(--lh-snug);
}
.avora-label {
  font-family: var(--font-ui);
  font-weight: var(--fw-semibold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.avora-bg-app { background: var(--grad-bg-app); }
.avora-bg-sky { background: var(--grad-sky-dusk); }