/* ==================================================
   VARIABLES.CSS — DESIGN TOKENS
   ==================================================
   PURPOSE: This file is the single source of truth for
   every color, font, spacing value, and size used across
   the site. It uses native CSS Custom Properties
   (--variable-name syntax), not a preprocessor like Sass —
   staying true to the zero-dependency philosophy while
   still getting real variables, inheritance, and even
   runtime updates via JavaScript if ever needed.

   ENGINEERING RATIONALE:
   Imagine the brand color changes in 8 months. Without
   this file, you'd grep through every CSS file hunting
   for every instance of a hardcoded hex value — error-prone
   and easy to miss instances. With this file, you change
   ONE line here and it propagates everywhere instantly.

   This is the same principle as a #define constant in C,
   or a config file in a firmware project: define the value
   once, reference it everywhere, change it in one place.

   NOTE: These are placeholder values for Phase 1 structure.
   Actual brand colors/typography come in the Phase 2 visual
   identity pass — don't treat these as final art direction.
   ================================================== */
/* ---- TYPOGRAPHY ---- */
@font-face {
    font-family: 'Inter';
    src: url('../fonts/InterVariable.woff2') format('woff2');
    font-weight: 100 900;
    font-display: swap;
    font-style: normal;
}

:root {
    /* ---- COLOR PALETTE ----
       Named by role (--color-surface), not by appearance
       (--color-dark-gray). If the "surface" color changes
       from dark gray to navy, every rule referencing
       --color-surface stays correct with zero find/replace. */
    --color-background: #050505;
    --color-surface:    #121216;
    --color-text:       #e0e0e0;
    --color-text-muted: #888888;
    --color-accent:     #3a86ff;
    --color-border:     #2a2a2a;

    /* ---- TYPOGRAPHY ----
       System font stack as a Phase 1 placeholder: zero
       network requests, instant render, and every OS
       renders its own native, legible UI font. This will
       likely be swapped for a licensed/self-hosted brand
       typeface in Phase 2 — but the site should never
       ship without a working fallback stack regardless. */
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', Consolas, "Liberation Mono", monospace;

    /* A modular type scale (ratio-based, ~1.25 "Major Third")
       keeps heading sizes visually harmonious instead of
       arbitrary guesses like 22px, 27px, 34px. */
    --text-xsm:   0.675rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-lg:   1.25rem;
    --text-xl:   1.563rem;
    --text-2xl:  1.953rem;
    --text-3xl:  2.441rem;
    --text-4xl:  3.052rem;

    /* ---- SPACING SCALE ----
       A constrained set of spacing values (rather than
       "whatever pixel value looks right in the moment")
       keeps margins/padding consistent across every
       component. This is the same discipline as using
       a fixed set of register widths in hardware design
       rather than arbitrary bit widths per signal. */
    --space-20xs:  0.01rem;
    --space-9xs:  0.05rem;
    --space-2xs:  0.2rem;
    --space-xs:  0.5rem;
    --space-sm:  1rem;
    --space-md:  1.5rem;
    --space-lg:  2.5rem;
    --space-xl:  4rem;
    --space-2xl: 6rem;

    /* ---- LAYOUT ----
       Single source of truth for the max content width,
       referenced by the .container utility class in
       style.css. */
    --container-width: 1400px;
    --border-radius: 4px;

    /* ---- MOTION ----
       Centralizing transition timing means every hover
       effect, dropdown, or fade feels consistent site-wide
       rather than each component inventing its own speed. */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;

    /* ---- PHASE 2 ADDITIONS ----
       Added for the front-page rebuild. Same rule as above:
       named by role, consumed everywhere via var(), never
       hardcoded at the point of use.

       --color-surface-raised: one step lighter than
       --color-surface, for cards that sit ON TOP of an
       already-elevated surface (e.g. a project card's media
       placeholder sitting inside the card itself).

       --color-accent-glow: the accent color at low opacity,
       used for the hero's ambient glow and focus/hover halos.
       Kept as a token (not re-derived with opacity utilities
       everywhere it's used) so the glow color moves in lockstep
       if --color-accent ever changes.

       --shadow-card: a single elevation shadow reused by every
       raised component (cards, the stats band) instead of each
       one inventing its own blur/spread values. */
    --color-surface-raised: #1a1a20;
    --color-accent-glow: rgba(58, 134, 255, 0.18);
    --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.35);
}
/* Light Mode Overrides */
[data-theme='light'] {
	--color-background: #ffffff;
	--color-surface: #f4f4f4;
	--color-text: #1a1a1a;
	--color-text-muted: #555555;
	--color-accent: #0077b6; /* A deeper blue for light mode readability */
	--color-surface-raised: #e8e8e8;
	--color-accent-glow: rgba(0, 119, 182, 0.12);
	--shadow-card: 0 8px 24px rgba(0, 0, 0, 0.08);
}