/* ==========================================================================
   Paglu Game — tokens.css
   Design tokens for the "Midnight High-Roller Lounge" system.
   Colour, typography, spacing, radii, elevation, motion and z-index scales.
   Every other stylesheet consumes these variables; never hard-code a colour.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Self-hosted webfonts (WOFF2, latin + latin-ext subsets)
   -------------------------------------------------------------------------- */

/* Display serif — Cormorant Garamond (variable) */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-latin-ext.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;
}

/* Body / UI sans — Sora (variable) */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('../fonts/sora-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: 'Sora';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('../fonts/sora-latin-ext.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;
}

/* Numeric / display panel — Orbitron (variable) */
@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/orbitron-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;
}

/* --------------------------------------------------------------------------
   2. Root tokens
   -------------------------------------------------------------------------- */
:root {
  /* Base -------------------------------------------------------------- */
  --color-obsidian:        #08080B;  /* primary background, cool undertone */
  --color-obsidian-2:      #121218;  /* glass panel base (used under blur) */
  --color-obsidian-3:      #1B1B24;  /* elevated surface / modal */

  /* Burgundy ---------------------------------------------------------- */
  --color-burgundy:        #8C1029;  /* primary brand colour */
  --color-burgundy-light:  #C22548;  /* hover / gradient highlight */
  --color-burgundy-dark:   #4F0817;  /* shadow / gradient depth */

  /* Champagne gold ---------------------------------------------------- */
  --color-gold:            #E3BD73;  /* accent, neon edges, CTAs */
  --color-gold-light:      #F5DFA9;  /* glow / highlight / hover */
  --color-gold-dark:       #B08A47;  /* shadow gold, pressed states */

  /* Text -------------------------------------------------------------- */
  --color-text-primary:    #F7F1E8;
  --color-text-secondary:  #B9AFC4;  /* cool muted tone, matches obsidian */
  /* Nudged up from #7C7688: the darker value measured ~4.4:1 against a glass
     panel, just under the WCAG AA 4.5:1 floor. This reads ~5.3:1. */
  --color-text-muted:      #8A8397;

  /* Utility ----------------------------------------------------------- */
  --color-border:          rgba(227, 189, 115, 0.18);
  --color-border-strong:   rgba(227, 189, 115, 0.42);
  --color-success:         #4CAF7D;
  --color-glow-gold:       rgba(227, 189, 115, 0.40);
  --color-glow-burgundy:   rgba(194, 37, 72, 0.35);

  /* Glass surfaces ---------------------------------------------------- */
  --glass-bg:              rgba(18, 18, 24, 0.55);
  --glass-bg-soft:         rgba(18, 18, 24, 0.34);
  --glass-bg-strong:       rgba(12, 12, 17, 0.78);
  --glass-blur:            blur(16px) saturate(125%);
  --glass-blur-strong:     blur(24px) saturate(135%);

  /* Signature gradients ------------------------------------------------ */
  --grad-spotlight:
    radial-gradient(120% 90% at 78% 8%,  rgba(140, 16, 41, 0.55) 0%, rgba(8, 8, 11, 0) 62%),
    radial-gradient(85%  70% at 8%  92%, rgba(79, 8, 23, 0.55) 0%, rgba(8, 8, 11, 0) 60%),
    linear-gradient(168deg, #10070E 0%, var(--color-obsidian) 48%, #0B0910 100%);
  --grad-gold-line:
    linear-gradient(90deg, transparent 0%, var(--color-gold-dark) 18%, var(--color-gold-light) 50%, var(--color-gold-dark) 82%, transparent 100%);
  --grad-gold-text:
    linear-gradient(103deg, var(--color-gold-dark) 0%, var(--color-gold-light) 38%, #FFF6E2 52%, var(--color-gold) 72%, var(--color-gold-dark) 100%);
  --grad-burgundy:
    linear-gradient(135deg, var(--color-burgundy-dark) 0%, var(--color-burgundy) 55%, var(--color-burgundy-light) 100%);
  --grad-glass-shine:
    linear-gradient(105deg, transparent 32%, rgba(247, 241, 232, 0.10) 45%, rgba(245, 223, 169, 0.22) 50%, rgba(247, 241, 232, 0.10) 55%, transparent 68%);

  /* Typography --------------------------------------------------------- */
  --font-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-body:    'Sora', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-num:     'Orbitron', 'Sora', ui-monospace, 'SF Mono', Consolas, monospace;

  /* Fluid type scale (mobile-first, clamps up to desktop) */
  --fs-display:  clamp(2.75rem, 1.55rem + 5.6vw, 5.75rem);
  --fs-h1:       clamp(2.35rem, 1.45rem + 4.1vw, 4.25rem);
  --fs-h2:       clamp(1.95rem, 1.35rem + 2.6vw, 3.15rem);
  --fs-h3:       clamp(1.35rem, 1.10rem + 1.1vw, 1.85rem);
  --fs-h4:       clamp(1.10rem, 1.00rem + 0.5vw, 1.30rem);
  --fs-lead:     clamp(1.02rem, 0.95rem + 0.42vw, 1.20rem);
  --fs-body:     clamp(0.95rem, 0.92rem + 0.16vw, 1.02rem);
  --fs-sm:       0.875rem;
  --fs-xs:       0.78rem;
  --fs-eyebrow:  0.72rem;

  --lh-tight: 1.06;
  --lh-snug:  1.28;
  --lh-body:  1.78;
  --lh-loose: 1.9;

  --tracking-eyebrow: 0.34em;
  --tracking-wide:    0.08em;

  /* Spacing scale ------------------------------------------------------ */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* Section rhythm + page gutters (the generous left/right breathing room) */
  --section-y:  clamp(4rem, 2.4rem + 7vw, 8.5rem);
  --container:  1240px;
  --gutter:     clamp(1.25rem, 0.35rem + 4.2vw, 4.5rem);

  /* Radii — architectural, low curvature */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  18px;
  --radius-pill: 999px;

  /* Elevation ---------------------------------------------------------- */
  --shadow-panel: 0 26px 64px -34px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.045);
  --shadow-lift:  0 34px 72px -30px rgba(0, 0, 0, 0.95), 0 0 40px -18px var(--color-glow-gold);
  --shadow-neon:  0 0 0 1px rgba(227, 189, 115, 0.22), 0 0 18px -4px var(--color-glow-gold);
  --shadow-neon-strong: 0 0 0 1px rgba(227, 189, 115, 0.55), 0 0 28px -2px var(--color-glow-gold), inset 0 0 22px -14px var(--color-gold-light);

  /* Motion ------------------------------------------------------------- */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io:   cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:  180ms;
  --dur-mid:   360ms;
  --dur-slow:  680ms;

  /* Z-index ------------------------------------------------------------ */
  --z-bg:      0;
  --z-content: 1;
  --z-sticky:  60;
  --z-nav:     80;
  --z-drawer:  90;
  --z-modal:   100;
  --z-toast:   110;
}

/* Angle custom property powers the travelling light-trace on buttons.
   Registered so it can be animated; browsers without @property fall back
   to a static border glow, which is the graceful degradation we want. */
@property --trace-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}