/* ============================================
   Deltahedge — Design System Variables
   ============================================ */

/* ---------- Font faces ---------- */
/* Gordita — primary brand typeface (replaces Inter). Licensed OTF files in /fonts. */
@font-face { font-family: 'Gordita'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/Gordita-Light.otf') format('opentype'); }
@font-face { font-family: 'Gordita'; font-style: italic; font-weight: 300; font-display: swap; src: url('../fonts/Gordita-Light_Italic.otf') format('opentype'); }
@font-face { font-family: 'Gordita'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/Gordita-Regular.otf') format('opentype'); }
@font-face { font-family: 'Gordita'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/Gordita-Regular_Italic.otf') format('opentype'); }
@font-face { font-family: 'Gordita'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/Gordita-Medium.otf') format('opentype'); }
@font-face { font-family: 'Gordita'; font-style: italic; font-weight: 500; font-display: swap; src: url('../fonts/Gordita-Medium_Italic.otf') format('opentype'); }
@font-face { font-family: 'Gordita'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/Gordita-Bold.otf') format('opentype'); }
@font-face { font-family: 'Gordita'; font-style: italic; font-weight: 700; font-display: swap; src: url('../fonts/Gordita-Bold_Italic.otf') format('opentype'); }
@font-face { font-family: 'Gordita'; font-style: normal; font-weight: 900; font-display: swap; src: url('../fonts/Gordita-Black.otf') format('opentype'); }
@font-face { font-family: 'Gordita'; font-style: italic; font-weight: 900; font-display: swap; src: url('../fonts/Gordita-Black_Italic.otf') format('opentype'); }

:root {
    /* ─── Brand accent ─── */
    --accent:               #c8ff00;
    --accent-light:         #d4ff33;
    --accent-dim:           rgba(200, 255, 0, 0.12);
    --accent-muted:         rgba(200, 255, 0, 0.5);
    --accent-dark:          #a0e000;

    /* Secondary blue — used sparingly, mostly in gradient + badges */
    --accent-blue:          #1799da;
    --accent-blue-light:    #3ab4ef;
    --accent-blue-dim:      rgba(23, 153, 218, 0.15);

    /* ─── Backgrounds (dark palette — the default canvas) ─── */
    --bg-primary:           #0a0e1a;
    --bg-surface:           #0f1322;
    --bg-surface-light:     #151a2e;
    --bg-card:              #121729;
    --bg-card-hover:        #1a2038;
    --bg-elevated:          #1c2236;

    /* Light companion (for alternating sections) */
    --bg-contrast:          #f5f5fa;
    --bg-contrast-card:     #ffffff;
    --bg-contrast-surface:  #fafafd;
    --border-contrast:      #e5e5ed;

    /* ─── Text (on dark) ─── */
    --fg1:                  #f0f0f5;
    --fg2:                  #8a8fa8;
    --fg3:                  #5a5f78;
    /* Backward-compatible aliases */
    --text-primary:         var(--fg1);
    --text-secondary:       var(--fg2);
    --text-muted:           var(--fg3);

    /* Text on light sections */
    --fg1-light:            #1a1a2e;
    --fg2-light:            #555570;
    --fg3-light:            #999;

    /* ─── Borders + utility ─── */
    --border-subtle:        rgba(255, 255, 255, 0.06);
    --border-medium:        rgba(255, 255, 255, 0.10);
    --overlay:              rgba(10, 14, 26, 0.85);

    /* ─── Semantic ─── */
    --success:              #22c55e;
    --success-dim:          rgba(34, 197, 94, 0.10);
    --danger:               #ef4444;
    --danger-dim:           rgba(239, 68, 68, 0.10);

    /* ─── Shadows ─── */
    --shadow-sm:            0 2px 12px rgba(0, 0, 0, 0.25);
    --shadow:               0 4px 24px rgba(0, 0, 0, 0.40);
    --shadow-lg:            0 8px 48px rgba(0, 0, 0, 0.50);
    --shadow-lime:          0 4px 20px rgba(200, 255, 0, 0.30);
    --shadow-light:         0 12px 40px rgba(10, 14, 26, 0.12);

    /* ─── Gradients ─── */
    --gradient-accent:      linear-gradient(135deg, var(--accent), var(--accent-blue));
    --gradient-lime:        linear-gradient(135deg, #c8ff00 0%, #a0e000 100%);
    --gradient-surface:     linear-gradient(180deg, var(--bg-surface), var(--bg-primary));
    --gradient-animated:    linear-gradient(-45deg, #c8ff00, #d4ff33, #a0e000, #e0ff66);

    /* ─── Typography — families ─── */
    --font-body: 'Gordita', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;

    /* ─── Type scale ─── */
    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.25rem;
    --text-2xl:  1.5rem;
    --text-3xl:  2rem;
    --text-4xl:  2.5rem;
    --text-5xl:  3.25rem;
    --text-6xl:  4rem;

    /* ─── Weights — mapped to Gordita's available cuts (300/400/500/700/900) ─── */
    --fw-light:      300;
    --fw-normal:     400;
    --fw-medium:     500;
    --fw-semibold:   700;   /* Gordita has no 600 — fall to Bold */
    --fw-bold:       700;
    --fw-extrabold:  900;   /* Gordita has no 800 — Black */
    --fw-black:      900;

    /* Backward-compatible weight aliases (old code uses --font-*) */
    --font-normal:    var(--fw-normal);
    --font-medium:    var(--fw-medium);
    --font-semibold:  var(--fw-semibold);
    --font-bold:      var(--fw-bold);
    --font-extrabold: var(--fw-extrabold);

    /* ─── Spacing (4px base, 8px rhythm) ─── */
    --space-xs:   0.25rem;
    --space-sm:   0.5rem;
    --space-md:   1rem;
    --space-lg:   1.5rem;
    --space-xl:   2rem;
    --space-2xl:  3rem;
    --space-3xl:  4rem;
    --space-4xl:  6rem;
    --space-5xl:  8rem;

    /* ─── Layout ─── */
    --max-width:         1600px;
    --max-width-narrow:  800px;
    --header-height:     72px;

    /* ─── Radii ─── */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-full: 9999px;

    /* ─── Motion ─── */
    --ease:              ease;
    --transition-fast:   150ms var(--ease);
    --transition-base:   250ms var(--ease);
    --transition-slow:   400ms var(--ease);
}