/* ========================================
   DESIGN TOKENS — KLETO
   Default theme: Dark
   Note: Light & Dev themes will override these via [data-theme] in later phases.
   ======================================== */

:root {
    /* Theme meta */
    --theme-name: "dark";

    /* Color — Background / Surfaces (60 / 30 split) */
    --color-bg-0: #000000;              /* Page background (matches current body bg) */
    --color-bg-1: rgba(0, 0, 0, 0.05);  /* Subtle surface (e.g., hero container) */

    /* Color — Text */
    --color-text-0: #ffffff;            /* Primary text */
    --color-text-1: #cccccc;            /* Muted / body text */
    --color-text-label: rgba(255, 255, 255, 0.55); /* Eyebrow / section label */

    /* Logo */
    --color-logo: #ffffff;

    /* Color — Accent (interaction only). Near-monochrome: a brightness
       shift, not a hue, per docs/DESIGN-SYSTEM.md. */
    --color-accent-0: #F1F0EA;
    --color-accent-0-soft: rgba(241, 240, 234, 0.12);

    /* Color — Status / Emphasis */
    --color-accent-danger: #ff0000;

    /* Color — Borders / Dividers */
    --color-border-0: rgba(255, 255, 255, 0.1);

    /* Typography — Families */
    --font-family-sans: 'Space Grotesk', sans-serif;
    --font-family-mono: 'Space Mono', monospace;

    /* Typography — Sizes (scale)
       NOTE: Values are aligned with existing site usage to avoid visual jumps.
    */
    --font-size-xs: 0.75rem;   /* small labels / meta */
    --font-size-sm: 0.875rem;  /* captions */
    --font-size-md: 1rem;      /* body */
    --font-size-lg: 1.125rem;  /* large body / lead */
    --font-size-xl: 1.5rem;    /* h3, section sub-headings */
    --font-size-2xl: 2.5rem;   /* h2, hero titles */
    --font-size-3xl: 3.5rem;   /* main h1, hero display */

    /* Typography — Line heights */
    --line-height-tight: 1.1;
    --line-height-normal: 1.6;
    --line-height-loose: 1.8;

    /* Typography — Weights */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Typography — Semantic roles (aliases over scale above) */
    --font-size-heading-1: var(--font-size-3xl);
    --font-size-heading-2: var(--font-size-2xl);
    --font-size-heading-3: var(--font-size-xl);

    --font-size-body: var(--font-size-md);
    --font-size-body-large: var(--font-size-lg);
    --font-size-body-small: var(--font-size-sm);

    --font-size-label: var(--font-size-xs);
    --font-size-overline: var(--font-size-xs);

    /* Spacing scale */
    --space-1: 0.25rem;  /* 4px */
    --space-2: 0.5rem;   /* 8px */
    --space-3: 0.75rem;  /* 12px */
    --space-4: 1rem;     /* 16px */
    --space-5: 1.5rem;   /* 24px */
    --space-6: 2rem;     /* 32px */

    /* Radii: 4px house constant. No pills. */
    --radius-none: 0;
    --radius-sm: 4px;
    --radius-md: 4px;
    --radius-lg: 4px;
    --radius-card: 4px;

    /* Nexus gradient (matches animation palette) */
    --gradient-nexus: linear-gradient(120deg, #45aa2c 0%, #23ebc3 45%, #6fd6ff 100%);

    /* Shadows (kept minimal for now) */
    --shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.25);
    --shadow-strong: 0 10px 30px rgba(0, 0, 0, 0.5);

    /* Motion */
    --duration-fast: 150ms;
    --duration-normal: 300ms;
    --duration-slow: 450ms;
    --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --space-section: 5rem;

    /* Glass: quiet frost over nexus / glyphs. Not a flourish. */
    --header-offset: 52px;
    --page-gutter: 20px;

    --glass-bg: rgba(255, 255, 255, 0.07);
    --glass-blur: 20px;

    /* Component-specific */
    --service-icon-bg: rgba(255, 255, 255, 0.1);
    --header-bg: rgba(0, 0, 0, 0.72);
    --card-bg: rgba(255, 255, 255, 0.03);
    --hero-bg: rgba(0, 0, 0, 0.05);
    --button-bg: rgba(255, 255, 255, 0.05);
    --button-border: rgba(255, 255, 255, 0.5);
    --button-bg-hover: var(--color-accent-0-soft);
    --button-wipe: var(--color-accent-0);
    --button-wipe-text: var(--color-bg-0);
    --button-border-hover: var(--color-accent-0);
    --secondary-btn-bg: transparent;
    --secondary-btn-border: rgba(255, 255, 255, 0.3);
    --secondary-btn-hover-bg: rgba(255, 255, 255, 0.05);
    --secondary-btn-hover-border: rgba(255, 255, 255, 0.5);
    --clients-logo-invert: 0;
}

/* Light Theme */
:root[data-theme="light"] {
    --theme-name: "light";

    --color-bg-0: #ffffff;
    --color-bg-1: #f5f5f7;

    --color-text-0: #000000;
    --color-text-1: #4b5563;
    --color-text-label: rgba(0, 0, 0, 0.55);

    --color-border-0: rgba(15, 23, 42, 0.1);

    --glass-bg: rgba(255, 255, 255, 0.62);
    --glass-blur: 20px;

    --color-logo: #000000;
    --service-icon-bg: rgba(0, 0, 0, 0.1);
    --header-bg: rgba(255, 255, 255, 0.86);
    --card-bg: rgba(0, 0, 0, 0.03);
    --hero-bg: rgba(255, 255, 255, 0.05);
    --button-bg: rgba(0, 0, 0, 0.05);
    --button-border: rgba(0, 0, 0, 0.5);
    --secondary-btn-bg: transparent;
    --secondary-btn-border: rgba(0, 0, 0, 0.3);
    --secondary-btn-hover-bg: rgba(0, 0, 0, 0.05);
    --secondary-btn-hover-border: rgba(0, 0, 0, 0.5);
    --color-accent-0: #0F0E12;
    --color-accent-0-soft: rgba(15, 14, 18, 0.12);
    --clients-logo-invert: 1;
}

@media (max-width: 380px) {
    :root {
        --page-gutter: 16px;
    }
}