:root {
    --font-display: 'Orbitron', 'Trebuchet MS', sans-serif;
    --font-body: 'Fira Code', 'IBM Plex Mono', Consolas, 'Courier New', monospace;
    --font-mono: 'Fira Code', Consolas, 'Courier New', monospace;
    --font-accent: 'Six Caps', 'Arial Narrow', sans-serif;

    /* Teal + warm sand — avoids the common AI purple/violet band */
    --primary-color: #7ec8b8;
    --secondary-color: #c9a227;
    --accent-color: #9fd4c8;
    --link-color: #7ec8b8;

    --background-color: #101114;
    --background-color-soft: rgba(22, 24, 28, 0.8);
    --background-color-soft-2: rgba(22, 24, 28, 0.94);
    --light-text-color: #f4f1ea;
    --text-color: #e7e4dc;
    --text-color-muted: #a8a59c;
    --text-color-dark: #e7e4dc;

    --border-color: rgba(231, 228, 220, 0.14);
    --border-color-light: rgba(231, 228, 220, 0.08);
    --border-color-dark: rgba(231, 228, 220, 0.18);
    --focus-outline-color: #c9a227;

    /*
      Type scale (16px root) — major-product pattern:
      12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / fluid display
    */
    --text-xs: 0.75rem;                          /* 12px captions */
    --text-sm: 0.875rem;                         /* 14px UI / nav */
    --text-base: 1rem;                           /* 16px body */
    --text-md: 1.125rem;                         /* 18px lead copy */
    --text-lg: 1.25rem;                          /* 20px subheads */
    --text-xl: 1.5rem;                           /* 24px section titles (sm) */
    --text-2xl: 1.875rem;                        /* 30px section titles */
    --text-3xl: 2.25rem;                         /* 36px hero support */
    --text-4xl: clamp(2.25rem, 4.2vw, 3.25rem);  /* hero name */
    --text-5xl: clamp(2.5rem, 5vw, 3.75rem);     /* hero display */

    /* Legacy aliases → keep older rules on the same scale */
    --font-size-xs: var(--text-xs);
    --font-size-s: var(--text-sm);
    --font-size-m: var(--text-base);
    --font-size-l: var(--text-md);
    --font-size-xl: var(--text-lg);
    --font-size-xxl: var(--text-2xl);
    --font-size-xxxl: var(--text-3xl);
    --font-size-display: var(--text-5xl);
    --font-size-base: var(--text-base);

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --line-height-tight: 1.15;
    --line-height-snug: 1.3;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.65;
    --letter-spacing-tight: -0.02em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.04em;
    --letter-spacing-caption: 0.08em;
    --measure: 65ch;
    --measure-narrow: 52ch;

    --padding-xs: 6px;
    --padding-small: 10px;
    --padding-medium: 16px;
    --padding-large: 24px;
    --padding-xl: 34px;

    --margin-xs: 4px;
    --margin-small: 10px;
    --margin-medium: 16px;
    --margin-large: 24px;
    --margin-xl: 36px;

    --spacing-s: 10px;
    --spacing-m: 16px;
    --spacing-l: 24px;

    --border-radius: 4px;
    --border-radius-s: 2px;
    --border-radius-m: 6px;
    --border-radius-l: 8px;
    --border-radius-xl: 10px;

    --box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
    --box-shadow-subtle: 0 6px 16px rgba(0, 0, 0, 0.2);
    --box-shadow-hover: 0 16px 32px rgba(0, 0, 0, 0.32);
    --box-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    --transition-speed: 0.25s;
    --surface-color: rgba(22, 24, 28, 0.88);
    --surface-color-strong: rgba(22, 24, 28, 0.96);
    --surface-color-elevated: rgba(16, 17, 20, 0.98);
    --surface-border: rgba(231, 228, 220, 0.12);
    --section-padding-y: 36px;
    --section-padding-x: 30px;
    --card-radius: 6px;

    --primary-color-light: rgba(126, 200, 184, 0.14);
    --primary-color-dark-hover: rgba(201, 162, 39, 0.16);
    --secondary-color-dark: #16181c;
    --secondary-color-darker: #0b0c0e;

    --heading-gradient-a: #e7e4dc;
    --heading-gradient-b: #e7e4dc;
    --tech-stack-box-bg: #16181c;
    --tech-stack-box-border: #2a2d33;
    --scrollbar-track: #0b0c0e;
    --scrollbar-thumb: #7ec8b8;
    --cursor-color: #7ec8b8;
}

.dark {
    --primary-color: #7ec8b8;
    --secondary-color: #c9a227;
    --accent-color: #9fd4c8;
    --link-color: #7ec8b8;

    --background-color: #101114;
    --background-color-soft: rgba(22, 24, 28, 0.8);
    --background-color-soft-2: rgba(22, 24, 28, 0.94);
    --text-color: #e7e4dc;
    --text-color-muted: #a8a59c;
    --text-color-dark: #e7e4dc;

    --border-color: rgba(231, 228, 220, 0.14);
    --border-color-light: rgba(231, 228, 220, 0.08);
    --border-color-dark: rgba(231, 228, 220, 0.18);
    --focus-outline-color: #c9a227;

    --box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
    --box-shadow-subtle: 0 6px 16px rgba(0, 0, 0, 0.2);
    --box-shadow-hover: 0 16px 32px rgba(0, 0, 0, 0.32);
    --surface-color: rgba(22, 24, 28, 0.88);
    --surface-color-strong: rgba(22, 24, 28, 0.96);
    --surface-color-elevated: rgba(16, 17, 20, 0.98);
    --surface-border: rgba(231, 228, 220, 0.12);

    --primary-color-light: rgba(126, 200, 184, 0.14);
    --primary-color-dark-hover: rgba(201, 162, 39, 0.16);
    --secondary-color-dark: #16181c;
    --secondary-color-darker: #0b0c0e;

    --heading-gradient-a: #e7e4dc;
    --heading-gradient-b: #e7e4dc;
    --tech-stack-box-bg: #16181c;
    --tech-stack-box-border: #2a2d33;
    --scrollbar-track: #0b0c0e;
    --scrollbar-thumb: #7ec8b8;
    --cursor-color: #7ec8b8;
}

.light {
    --primary-color: #2f6f63;
    --secondary-color: #9a7b1a;
    --accent-color: #2f6f63;
    --link-color: #2f6f63;

    --background-color: #f3f0e8;
    --background-color-soft: rgba(255, 255, 255, 0.78);
    --background-color-soft-2: rgba(255, 255, 255, 0.94);
    --light-text-color: #15171a;
    --text-color: #1c1e22;
    --text-color-muted: #5b5e66;
    --text-color-dark: #1c1e22;

    --border-color: rgba(28, 30, 34, 0.16);
    --border-color-light: rgba(28, 30, 34, 0.1);
    --border-color-dark: rgba(28, 30, 34, 0.2);
    --focus-outline-color: #9a7b1a;

    --box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
    --box-shadow-subtle: 0 6px 16px rgba(0, 0, 0, 0.06);
    --box-shadow-hover: 0 16px 32px rgba(0, 0, 0, 0.1);
    --surface-color: rgba(255, 255, 255, 0.82);
    --surface-color-strong: rgba(255, 255, 255, 0.94);
    --surface-color-elevated: rgba(255, 255, 255, 0.98);
    --surface-border: rgba(28, 30, 34, 0.1);

    --primary-color-light: rgba(47, 111, 99, 0.12);
    --primary-color-dark-hover: rgba(154, 123, 26, 0.12);
    --secondary-color-dark: #ebe6dc;
    --secondary-color-darker: #ddd7cb;

    --heading-gradient-a: #1c1e22;
    --heading-gradient-b: #1c1e22;
    --tech-stack-box-bg: #ebe6dc;
    --tech-stack-box-border: #d5cfc3;
    --scrollbar-track: #ddd7cb;
    --scrollbar-thumb: #2f6f63;
    --cursor-color: #2f6f63;
}