/* ============================================================
   HYENAI — DESIGN SYSTEM v2.0
   A single source of truth for all design tokens.
   Import this FIRST in every stylesheet.
   ============================================================ */

/* ─────────────────────────────────────────
   GOOGLE FONTS
   Inter (UI text) + Syne (display headings)
───────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Syne:wght@600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {

    /* ─── COLOR TOKENS ─── */

    /* Brand Primaries */
    --clr-gold:          #C9963A;   /* refined, not garish */
    --clr-gold-dim:      #9A7020;
    --clr-gold-bright:   #E8B96A;
    --clr-gold-glow:     rgba(201, 150, 58, 0.18);

    /* Neutrals — dark mode base */
    --clr-ink:           #07070A;   /* true near-black */
    --clr-surface-0:     #0D0D12;   /* page bg */
    --clr-surface-1:     #13131A;   /* card bg */
    --clr-surface-2:     #1A1A24;   /* elevated card / panel */
    --clr-border:        rgba(201, 150, 58, 0.15);
    --clr-border-strong: rgba(201, 150, 58, 0.45);

    /* Text */
    --clr-text-primary:  #F0EDE8;
    --clr-text-secondary:#A09880;
    --clr-text-muted:    #5C5A52;
    --clr-white:         #FFFFFF;

    /* Semantic */
    --clr-danger:        #E05252;
    --clr-success:       #4CAF82;
    --clr-info:          #5BA4CF;

    /* ─── TYPOGRAPHY ─── */
    --font-display:      'Syne',          sans-serif;  /* headings */
    --font-body:         'Inter',         sans-serif;  /* all body text */
    --font-mono:         'JetBrains Mono', monospace;  /* code / labels */

    /* Type scale — conservative clamp values, one-line friendly */
    --text-xs:   11px;
    --text-sm:   13px;
    --text-base: 15px;
    --text-lg:   17px;
    --text-xl:   20px;
    --text-2xl:  24px;
    --text-3xl:  clamp(24px, 2.2vw, 32px);
    --text-4xl:  clamp(30px, 2.8vw, 42px);
    --text-5xl:  clamp(38px, 3.5vw, 56px);

    /* ─── SPACING (8-pt grid) ─── */
    --sp-1:  4px;
    --sp-2:  8px;
    --sp-3:  12px;
    --sp-4:  16px;
    --sp-5:  24px;
    --sp-6:  32px;
    --sp-7:  48px;
    --sp-8:  64px;
    --sp-9:  96px;
    --sp-10: 128px;

    /* Legacy aliases (keeps older HTML working) */
    --space-xs:  var(--sp-1);
    --space-sm:  var(--sp-2);
    --space-md:  var(--sp-4);
    --space-lg:  var(--sp-6);
    --space-xl:  var(--sp-7);
    --space-2xl: var(--sp-9);

    /* ─── RADII ─── */
    --radius-sm:  4px;
    --radius-md:  8px;
    --radius-lg:  16px;
    --radius-xl:  24px;
    --radius-pill:999px;

    /* ─── SHADOWS ─── */
    --shadow-glow-sm:  0 0 16px rgba(201, 150, 58, 0.12);
    --shadow-glow-md:  0 0 40px rgba(201, 150, 58, 0.18);
    --shadow-glow-lg:  0 0 80px rgba(201, 150, 58, 0.22);
    --shadow-card:     0 4px 24px rgba(0, 0, 0, 0.45);
    --shadow-card-lg:  0 12px 48px rgba(0, 0, 0, 0.6);

    /* ─── GLASS EFFECT ─── */
    --glass-bg:     rgba(13, 13, 18, 0.72);
    --glass-border: rgba(201, 150, 58, 0.12);
    --glass-blur:   blur(18px);

    /* ─── TRANSITIONS ─── */
    --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --dur-fast:    150ms;
    --dur-base:    280ms;
    --dur-slow:    500ms;

    /* ─── Z-INDEX LADDER ─── */
    --z-bg:      -1;
    --z-base:     1;
    --z-card:     5;
    --z-sticky:  50;
    --z-header: 100;
    --z-modal:  200;
    --z-toast:  300;

    /* ─── BORDER ─── */
    --border-thin:  1px solid var(--clr-border);
    --border-thick: 1px solid var(--clr-border-strong);

    /* Legacy color aliases */
    --black:      var(--clr-ink);
    --white:      var(--clr-white);
    --gold:       var(--clr-gold);
    --gold-light: var(--clr-gold-bright);
    --gold-dark:  var(--clr-gold-dim);
    --border-thin-px: 2px;
    --border-thick-px: 4px;
}

/* ─────────────────────────────────────────
   REDUCED MOTION — GLOBAL KILL SWITCH
───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration:   0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration:  0.01ms !important;
        scroll-behavior:      auto   !important;
    }
}

/* ─────────────────────────────────────────
   MOBILE DOWNLOAD NOTICE
   (Injected by security-core.js)
───────────────────────────────────────── */
.mobile-download-notice {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-5);
    border: 1px solid var(--clr-border-strong);
    border-radius: var(--radius-md);
    color: var(--clr-text-secondary);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    letter-spacing: 0.04em;
    cursor: default;
    user-select: none;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
}

.mobile-download-notice .mdn-icon {
    width:  18px;
    height: 18px;
    opacity: 0.6;
    flex-shrink: 0;
}