/*
 * assets/css/variables.css
 * Two-layer CSS custom property design token system
 * Source: penpot.app/blog/the-developers-guide-to-design-tokens-and-css-variables
 *
 * ARCHITECTURE:
 *   Layer 1 — Primitive tokens: raw brand values. Never reference directly in component CSS.
 *   Layer 2 — Semantic tokens: purpose-mapped aliases. Use these everywhere in component/layout CSS.
 *
 * Changing a primitive value here propagates automatically to every semantic alias
 * and every component that references the semantic token.
 *
 * LOAD ORDER: This file must be loaded FIRST — before reset.css, typography.css, layout.css,
 * and utilities.css. All other CSS files depend on these custom properties.
 */

/* ==========================================================================
   LAYER 1: PRIMITIVE TOKENS
   Raw brand values. Never use directly in component/layout CSS.
   ========================================================================== */
:root {

  /* --- Color Primitives --- */

  /* Navy scale (darkest backgrounds) */
  --color-navy-950: #0a0f1e;
  --color-navy-900: #0d1424;
  --color-navy-800: #111a2e;
  --color-navy-700: #172038;

  /* Charcoal scale (elevated surfaces, cards) */
  --color-charcoal-800: #1a1f2e;
  --color-charcoal-700: #252b3d;
  --color-charcoal-600: #2e3450;

  /* Gold/Amber scale (accent, CTA) */
  --color-gold-400: #d4a843;
  --color-gold-500: #c9a84c;
  --color-gold-600: #b8933f;

  /* Neutral scale */
  --color-white: #ffffff;
  --color-gray-100: #f5f5f5;
  --color-gray-300: #c4c4c4;
  --color-gray-500: #8a8a9a;
  --color-gray-700: #4a4a5a;

  /* --- Typography Primitives --- */
  --font-family-base: 'Inter', system-ui, -apple-system, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* --- Spacing Primitives (4px base scale) --- */
  --space-1:  0.25rem;  /*  4px */
  --space-2:  0.5rem;   /*  8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-24: 6rem;     /* 96px */
  --space-32: 8rem;     /* 128px */

}


/* ==========================================================================
   LAYER 2: SEMANTIC TOKENS
   Context-mapped aliases. Use these in all component and layout CSS.
   ========================================================================== */
:root {

  /* --- Color Semantics --- */
  --color-bg-base:            var(--color-navy-950);      /* Page background */
  --color-bg-elevated:        var(--color-navy-800);      /* Header, footer, elevated surfaces */
  --color-bg-card:            var(--color-charcoal-800);  /* Card backgrounds */
  --color-bg-card-hover:      var(--color-charcoal-700);  /* Card backgrounds on hover */
  --color-accent-primary:     var(--color-gold-500);      /* Primary CTA, highlights, links */
  --color-accent-primary-hover:  var(--color-gold-400);   /* CTA hover state */
  --color-accent-primary-active: var(--color-gold-600);   /* CTA active/pressed state */
  --color-text-primary:       var(--color-white);         /* Headings, primary body text */
  --color-text-secondary:     var(--color-gray-300);      /* Nav links, secondary text */
  --color-text-muted:         var(--color-gray-500);      /* Timestamps, captions, footnotes */
  --color-border-subtle:      var(--color-charcoal-600);  /* Dividers, card borders */
  --color-border-accent:      var(--color-gold-500);      /* Accent borders, focus rings */

  /* --- Typography Semantics --- */
  --font-body:    var(--font-family-base);
  --font-heading: var(--font-family-base);

  /* --- Spacing Semantics --- */
  --space-section:   var(--space-24);   /* Between major page sections */
  --space-content:   var(--space-8);    /* Between content blocks within a section */
  --space-component: var(--space-6);    /* Internal component padding */
  --space-inline:    var(--space-4);    /* Inline element gaps */
  --space-tight:     var(--space-2);    /* Tight gaps, list item spacing */

  /* --- Layout Semantics --- */
  --container-max:     1200px;
  --container-padding: var(--space-6);
  --border-radius-sm:  4px;
  --border-radius-md:  8px;
  --border-radius-lg:  16px;
  --border-radius-full: 9999px;

  /* --- Header --- */
  --header-height: 64px;  /* Matches actual site-header rendered height; update after browser verification in Plan 02 */

}