/* ============================================================
   VAID Design Guide  |  designguide.css
   Single source of truth for all design tokens.
   Imported at the top of style.css and adminstyles.css.
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   BRAND — fixed values, never change
   ══════════════════════════════════════════════════════════ */
:root {
  --gold:          #C9A96E;
  --gold-lt:       #E8D5B0;
  --gold-dim:      rgba(201, 169, 110, 0.15);
  --gold-border:   rgba(201, 169, 110, 0.50);
  --gold-border-lt: rgba(201, 169, 110, 0.20);

  /* ── Palette — accent / category colors ── */
  --color-blue:      #2196F3;
  --color-purple:    #9C7DB5;
  --color-orange:    #FF5722;
  --color-teal:      #0DCAF0;
  --color-star:      #F4C542;
  --color-danger:    #E74C3C;
  --color-green:     #2ECC71;

  /* ── Status ── */
  --error-color:    #FF6B6B;
  --error-bg:       rgba(255, 107, 107, 0.12);
  --success-color:  #4CAF50;
  --success-bg:     rgba(76, 175, 80, 0.12);
  --warning-color:  #FF9800;
  --warning-bg:     rgba(255, 152, 0, 0.12);
  --info-color:     #0DCAF0;
  --info-bg:        rgba(13, 202, 240, 0.12);

  /* ── Alert banners (Bootstrap-style) ── */
  --alert-error-bg:     #F8D7DA;
  --alert-error-border: #F5C6CB;
  --alert-error-text:   #721C24;
  --alert-success-bg:   #D4EDDA;
  --alert-success-border: #C3E6CB;
  --alert-success-text: #155724;
  --alert-warning-bg:   #FFF3CD;
  --alert-warning-border: #FFEEBA;
  --alert-warning-text: #856404;

  /* ══════════════════════════════════════════════════════════
     THEME SURFACES — Dark (default)
     ══════════════════════════════════════════════════════════ */
  --bg:           #0F0F0F;
  --bg-2:         #141414;
  --bg-3:         #1C1C1C;
  --surface:      #1A1A1A;
  --surface-2:    #222222;

  --text:         #E8E6E0;
  --text-2:       #A0A0A0;
  --muted:        #5E5E5E;

  --border:       #282828;
  --shadow-sm:    0 8px 30px rgba(0, 0, 0, 0.35);
  --shadow-md:    0 20px 60px rgba(0, 0, 0, 0.45);
  --shadow-lg:    0 40px 80px rgba(0, 0, 0, 0.55);

  /* Always-dark fixed surfaces (stats, footer, hero) */
  --dark-fixed:   #0C0C0C;
  --dark-2-fixed: #161616;

  /* ── Navbar ── */
  --nav-scrolled-bg:   rgba(12, 12, 12, 0.96);
  --nav-scrolled-text: #E8E6E0;

  /* ── Buttons ── */
  --btn-solid-bg:   var(--gold);
  --btn-solid-text: #0F0F0F;

  /* ── Forms ── */
  --form-bg: var(--bg-2);
  --opt-bg:  #1A1A1A;

  /* ══════════════════════════════════════════════════════════
     TYPOGRAPHY
     ══════════════════════════════════════════════════════════ */

  /* Font families */
  --f-serif: 'Cormorant Garamond', Georgia, serif;
  --f-sans:  'Inter', system-ui, -apple-system, sans-serif;
  --f-mono:  'Courier New', Courier, monospace;

  /* Font weights */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Font scale */
  --fs-2xs:    0.60rem;   /* ~9.6px  — tiny labels             */
  --fs-xs:     0.68rem;   /* ~10.9px — overlines, captions      */
  --fs-sm:     0.75rem;   /* ~12px   — secondary UI text        */
  --fs-base:   1rem;      /* 16px    — body copy                */
  --fs-md:     1.1rem;    /* ~17.6px — lead paragraphs          */
  --fs-lg:     1.3rem;    /* ~20.8px — card headings            */
  --fs-xl:     1.8rem;    /* ~28.8px — section sub-headings     */
  --fs-2xl:    2.4rem;    /* ~38.4px — section headings         */
  --fs-display: clamp(2.4rem, 6.5vw, 5.2rem); /* hero titles  */

  /* Letter spacing */
  --ls-tight:   0.04em;
  --ls-normal:  0.08em;
  --ls-wide:    0.15em;
  --ls-wider:   0.20em;
  --ls-widest:  0.35em;

  /* Line heights */
  --lh-tight:   1.1;
  --lh-snug:    1.5;
  --lh-base:    1.7;
  --lh-relaxed: 1.85;

  /* ══════════════════════════════════════════════════════════
     BORDER RADIUS
     ══════════════════════════════════════════════════════════ */

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-pill: 50px;
  --radius-full: 50%;

  /* ══════════════════════════════════════════════════════════
     Z-INDEX SCALE
     ══════════════════════════════════════════════════════════ */

  --z-below:   -1;
  --z-base:     0;
  --z-raised:   10;
  --z-nav:      1050;
  --z-overlay:  1000;
  --z-modal:    2000;
  --z-toast:    3000;

  /* ══════════════════════════════════════════════════════════
     EASING & TRANSITIONS
     ══════════════════════════════════════════════════════════ */

  --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-expo:   cubic-bezier(0.16, 1, 0.3, 1);
  --transition:  all 0.4s var(--ease-smooth);
}

/* ══════════════════════════════════════════════════════════
   LIGHT THEME OVERRIDES
   ══════════════════════════════════════════════════════════ */
[data-theme="light"] {
  --bg:           #FFFFFF;
  --bg-2:         #F7F5F0;
  --bg-3:         #EEEAE4;
  --surface:      #FFFFFF;
  --surface-2:    #F0EDE8;

  --text:         #1A1A1A;
  --text-2:       #555555;
  --muted:        #888888;

  --border:       #E2DED8;
  --shadow-sm:    0 8px 30px rgba(0, 0, 0, 0.08);
  --shadow-md:    0 20px 60px rgba(0, 0, 0, 0.12);
  --shadow-lg:    0 40px 80px rgba(0, 0, 0, 0.20);

  --nav-scrolled-bg:   rgba(255, 255, 255, 0.97);
  --nav-scrolled-text: #1A1A1A;

  --btn-solid-bg:   #0C0C0C;
  --btn-solid-text: #FFFFFF;

  --form-bg: #F7F5F0;
  --opt-bg:  #FFFFFF;
}

/* ══════════════════════════════════════════════════════════
   BUTTON TOKENS
   ══════════════════════════════════════════════════════════ */
:root {
  /* Size padding / font tokens */
  --btn-xs-py: 0.28rem;  --btn-xs-px: 0.70rem;  --btn-xs-fs: var(--fs-2xs);
  --btn-sm-py: 0.45rem;  --btn-sm-px: 1.10rem;  --btn-sm-fs: var(--fs-xs);
  --btn-md-py: 0.65rem;  --btn-md-px: 1.60rem;  --btn-md-fs: var(--fs-xs);
  --btn-lg-py: 0.90rem;  --btn-lg-px: 2.40rem;  --btn-lg-fs: 0.72rem;
  --btn-xl-py: 1.10rem;  --btn-xl-px: 3.00rem;  --btn-xl-fs: 0.80rem;
}