/*
 * ============================================================
 *  SponsorLink Design Tokens — Single Source of Truth
 *  Import this file FIRST in base.html before style.css
 *  Usage: var(--token-name)
 * ============================================================
 */

:root {

    /* ── BRAND COLOURS ──────────────────────────────────────────
       Canonical values. Use ONLY these. Never hardcode hex.
    ─────────────────────────────────────────────────────────── */

    /* Accent / Primary (Cyan-Blue) */
    --accent:            #00f2ff;
    --accent-rgb:        0, 242, 255;
    --accent-hover:      #0088d4;
    --accent-muted:      rgba(0, 242, 255, 0.12);  /* tinted bg */
    --accent-border:     rgba(0, 242, 255, 0.25);  /* tinted border */
    --accent-glow:       rgba(0, 242, 255, 0.30);  /* shadow glow */
    --accent-gradient:   linear-gradient(135deg, #00f2ff, #0088d4);

    /* Secondary / Gold */
    --secondary:         #FFD700;
    --secondary-rgb:     255, 215, 0;
    --secondary-dark:    #b8860b;                  /* gradient pair */
    --secondary-muted:   rgba(255, 215, 0, 0.10);  /* tinted bg */
    --secondary-border:  rgba(255, 215, 0, 0.30);  /* tinted border */
    --secondary-glow:    rgba(255, 215, 0, 0.12);  /* shadow glow */

    /* Success / Green */
    --success:           #4ade80;
    --success-rgb:       74, 222, 128;
    --success-muted:     rgba(74, 222, 128, 0.10);
    --success-border:    rgba(74, 222, 128, 0.30);

    /* Warning / Amber  (NEW — was hardcoded f59e0b/d97706/ff9f40) */
    --warning:           #f59e0b;
    --warning-rgb:       245, 158, 11;
    --warning-dark:      #d97706;
    --warning-muted:     rgba(245, 158, 11, 0.10);
    --warning-border:    rgba(245, 158, 11, 0.30);
    --warning-gradient:  linear-gradient(135deg, #f59e0b, #d97706);

    /* Error / Red */
    --error:             #ff6b6b;
    --error-rgb:         255, 107, 107;
    --error-muted:       rgba(255, 107, 107, 0.12);
    --error-border:      rgba(255, 107, 107, 0.40);

    /* Destructive (darker red for delete/disconnect actions) */
    --destructive:       #ef4444;
    --destructive-muted: rgba(239, 68, 68, 0.10);
    --destructive-border:rgba(239, 68, 68, 0.30);


    /* ── BACKGROUNDS ────────────────────────────────────────────
       Use these instead of hardcoded dark hex values.
    ─────────────────────────────────────────────────────────── */

    --bg-dark:           #141619;  /* page background */
    --bg-card:           rgba(255, 255, 255, 0.05);  /* glass card */
    --bg-card-hover:     rgba(255, 255, 255, 0.08);
    --bg-input:          rgba(0, 0, 0, 0.30);        /* form inputs */
    --bg-overlay:        rgba(0, 0, 0, 0.60);        /* modal overlay */
    --bg-pass:           linear-gradient(145deg, #0f1923 0%, #0a0e14 50%, #111a24 100%);
    --bg-drawer:         linear-gradient(180deg, #0e141b 0%, #06090d 100%);
    --bg-loyalty:        linear-gradient(135deg, #18202c 0%, #0d131a 100%);


    /* ── GLASS / BORDERS ────────────────────────────────────────
       All border values come from here.
    ─────────────────────────────────────────────────────────── */

    --glass-border:      rgba(255, 255, 255, 0.10);
    --glass-border-dim:  rgba(255, 255, 255, 0.05);
    --glass-border-mid:  rgba(255, 255, 255, 0.15);
    --glow:              rgba(0, 162, 255, 0.30);  /* legacy — maps to accent-glow */


    /* ── TEXT ───────────────────────────────────────────────────
       Two text colours. Everything else uses accent/success/etc.
    ─────────────────────────────────────────────────────────── */

    --text-main:         #ffffff;
    --text-dim:          #a0a0a0;
    --text-black:        #000000;  /* text on light/accent buttons */


    /* ── TYPOGRAPHY ─────────────────────────────────────────────
       T-shirt scale. Use these instead of arbitrary rem values.
       Base: 1rem = 16px
    ─────────────────────────────────────────────────────────── */

    --font-family:       'Outfit', sans-serif;
    --font-mono:         monospace;

    /* Weights */
    --weight-light:      300;
    --weight-regular:    400;
    --weight-medium:     500;
    --weight-semibold:   600;
    --weight-bold:       700;
    --weight-extrabold:  800;

    /* Size scale */
    --text-hero:         4.5rem;   /* hero H1 */
    --text-display:      2.5rem;   /* section display */
    --text-xl:           1.8rem;   /* large headings */
    --text-lg:           1.5rem;   /* H3, card titles */
    --text-md:           1.25rem;  /* subheadings */
    --text-base:         1rem;     /* body copy */
    --text-sm:           0.875rem; /* secondary text (≈14px) */
    --text-xs:           0.75rem;  /* labels, badges (12px) */
    --text-micro:        0.625rem; /* ultra-small annotations (10px) */

    /* Letter spacing */
    --tracking-tight:    -0.5px;
    --tracking-normal:   0;
    --tracking-wide:     1px;    /* uppercase hints */
    --tracking-wider:    1.5px;  /* labels, status */
    --tracking-widest:   2px;    /* badges */


    /* ── SPACING ────────────────────────────────────────────────
       Base-8 scale. Use multiples of 0.5rem (8px).
    ─────────────────────────────────────────────────────────── */

    --space-1:    0.25rem;  /*  4px */
    --space-2:    0.5rem;   /*  8px */
    --space-3:    0.75rem;  /* 12px */
    --space-4:    1rem;     /* 16px */
    --space-5:    1.25rem;  /* 20px */
    --space-6:    1.5rem;   /* 24px */
    --space-8:    2rem;     /* 32px */
    --space-10:   2.5rem;   /* 40px */
    --space-12:   3rem;     /* 48px */
    --space-16:   4rem;     /* 64px */
    --space-20:   5rem;     /* 80px */
    --space-24:   6rem;     /* 96px */
    --space-32:   8rem;     /* 128px */


    /* ── BORDER RADIUS ──────────────────────────────────────────
       Use these instead of arbitrary px values.
    ─────────────────────────────────────────────────────────── */

    --radius-sm:    6px;   /* small inputs, badges */
    --radius-md:    10px;  /* buttons, standard inputs */
    --radius-lg:    16px;  /* cards, panels */
    --radius-xl:    20px;  /* large cards, digital pass */
    --radius-2xl:   24px;  /* hero cards */
    --radius-full:  9999px; /* pills */
    --radius-circle: 50%;  /* dots, avatars */


    /* ── SHADOWS ────────────────────────────────────────────────
       Named shadow roles.
    ─────────────────────────────────────────────────────────── */

    --shadow-sm:     0 2px 8px rgba(0, 0, 0, 0.30);
    --shadow-md:     0 8px 24px rgba(0, 0, 0, 0.40);
    --shadow-lg:     0 20px 40px rgba(0, 0, 0, 0.50);
    --shadow-glow:   0 5px 15px var(--accent-glow);
    --shadow-glow-lg:0 20px 60px var(--accent-glow);
    --shadow-gold:   0 0 12px var(--secondary-glow);


    /* ── TRANSITIONS ────────────────────────────────────────────
       Consistent animation speeds.
    ─────────────────────────────────────────────────────────── */

    --transition-fast:   0.15s ease;
    --transition-base:   0.25s ease;
    --transition-slow:   0.4s ease;


    /* ── Z-INDEX SCALE ──────────────────────────────────────────
       Named layers.
    ─────────────────────────────────────────────────────────── */

    --z-base:       1;
    --z-raised:     10;
    --z-dropdown:   100;
    --z-sticky:     1000;
    --z-modal:      2000;
    --z-toast:      3000;
    --z-skip-link:  10000;
}