/**
 * Design Tokens — All CSS Custom Properties
 *
 * Edit these variables to change the site's entire look in one place.
 * Changes here ripple through every section automatically.
 */

:root {

    /* ── Colors ──────────────────────────────────────────────── */
    --color-bg-dark:       #0d0f14;   /* Nav, hero, dark sections */
    --color-bg-mid:        #13161e;   /* Alternate dark sections  */
    --color-bg-card:       #1a1e28;   /* Card/panel backgrounds   */
    --color-bg-light:      #ffffff;   /* White sections           */
    --color-bg-off-white:  #f8f9fa;   /* Subtle off-white bg      */

    --color-accent:        #e8a743;   /* Gold/amber — primary CTA  */
    --color-accent-hover:  #d4962f;   /* Hover state for accent   */
    --color-accent-light:  rgba(232, 167, 67, 0.12); /* Tinted bg */

    --color-text-primary:  #ffffff;   /* Primary text on dark bg  */
    --color-text-dark:     #111111;   /* Primary text on light bg */
    --color-text-muted:    #9ca3af;   /* Secondary/muted text     */
    --color-text-muted-dark: #6b7280; /* Muted text on light bg   */

    --color-border:        rgba(255, 255, 255, 0.08);
    --color-border-light:  rgba(0, 0, 0, 0.08);

    /* ── Typography ──────────────────────────────────────────── */
    --font-family:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --font-size-xs:        0.75rem;   /* 12px */
    --font-size-sm:        0.875rem;  /* 14px */
    --font-size-base:      1rem;      /* 16px */
    --font-size-md:        1.125rem;  /* 18px */
    --font-size-lg:        1.25rem;   /* 20px */
    --font-size-xl:        1.5rem;    /* 24px */
    --font-size-2xl:       2rem;      /* 32px */
    --font-size-3xl:       2.5rem;    /* 40px */
    --font-size-4xl:       3rem;      /* 48px */
    --font-size-5xl:       3.75rem;   /* 60px */

    --font-weight-regular:  400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;
    --font-weight-extrabold:800;
    --font-weight-black:    900;

    --line-height-tight:   1.2;
    --line-height-snug:    1.4;
    --line-height-normal:  1.6;
    --line-height-relaxed: 1.75;

    /* ── Spacing ─────────────────────────────────────────────── */
    --spacing-xs:   0.25rem;   /* 4px  */
    --spacing-sm:   0.5rem;    /* 8px  */
    --spacing-md:   1rem;      /* 16px */
    --spacing-lg:   1.5rem;    /* 24px */
    --spacing-xl:   2rem;      /* 32px */
    --spacing-2xl:  3rem;      /* 48px */
    --spacing-3xl:  4rem;      /* 64px */
    --spacing-4xl:  5rem;      /* 80px */
    --spacing-5xl:  6rem;      /* 96px */

    --section-padding:        80px;
    --section-padding-mobile: 48px;

    /* ── Layout ──────────────────────────────────────────────── */
    --container-max:    1200px;
    --container-pad:    20px;
    --grid-gap:         2rem;

    /* ── Borders & Radius ────────────────────────────────────── */
    --radius-sm:   6px;
    --radius-md:   12px;
    --radius-lg:   20px;
    --radius-xl:   32px;
    --radius-full: 9999px;

    /* ── Shadows ─────────────────────────────────────────────── */
    --shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.15);
    --shadow-md:  0 4px 20px rgba(0, 0, 0, 0.25);
    --shadow-lg:  0 8px 40px rgba(0, 0, 0, 0.35);
    --shadow-glow: 0 0 30px rgba(232, 167, 67, 0.2);

    /* ── Transitions ─────────────────────────────────────────── */
    --transition-fast:   150ms ease;
    --transition-base:   250ms ease;
    --transition-slow:   400ms ease;

    /* ── Navigation ──────────────────────────────────────────── */
    --nav-height:        72px;
    --nav-height-mobile: 60px;
}