/* ------------------------------------ *\
  #1. DESIGN TOKENS
\* ------------------------------------ */


:root {
    /* Dark theme tuned grays */
    --color-gray-100: #e5e7eb;
    --color-gray-200: #d1d5db;
    --color-gray-300: #9ca3af;
    --color-gray-400: #6b7280;
    --color-gray-500: #4b5563;
    --color-gray-600: #374151;
    --color-gray-700: #272b36;
    --color-gray-800: #1a1d24;
    --color-gray-900: #0f1115;

    /* Brand Colors */
    --color-brown-dark: #010001;
    --color-brown-light: #be7f51;
    --color-workhorse-yellow: #fed100;
    --color-workhorse-yellow-rgb: 254, 209, 0; /* RGB values for rgba() usage */

    /* Typography System */
    --font-family-sans: 'Inter', 
        BlinkMacSystemFont,
        -apple-system,
        "Segoe UI",
        "Roboto",
        "Oxygen",
        "Ubuntu",
        "Cantarell",
        "Fira Sans",
        "Droid Sans",
        "Helvetica Neue",
        sans-serif;
    --font-family-mono: cofo-sans-mono-variable, monospace;
    --font-family-code: cofo-sans-pixel, monospace;
    --font-family-display: cofo-gothic-variable, monospace;
    --font-family-serif: tiffin-latin-variable, Georgia, serif;

    /* Type Scale - Fluid Typography */
    --text-xs: clamp(0.70rem, calc(0.79rem + -0.06vw), 0.78rem);
    --text-s: clamp(0.94rem, calc(0.94rem + 0.00vw), 0.94rem);
    --text-m: clamp(1.13rem, calc(1.11rem + 0.09vw), 1.25rem);
    --text-l: clamp(1.35rem, calc(1.30rem + 0.23vw), 1.67rem);
    --text-xl: clamp(1.62rem, calc(1.53rem + 0.43vw), 2.22rem);
    --text-xxl: clamp(1.94rem, calc(1.80rem + 0.73vw), 2.96rem);
    --text-jumbo: clamp(2.33rem, calc(2.10rem + 1.15vw), 4rem);

    /* Font Widths */
    --width-condensed: 70;
    --width-narrow: 85;

    /* Font Weights */
    --weight-light: 300;
    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* Line Heights */
    --leading-none: 1;
    --leading-tight: 1.2;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 2;

    /* Letter Spacing */
    --tracking-tighter: -0.05em;
    --tracking-tight: -0.025em;
    --tracking-normal: 0;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.1em;

    /* Layout System */
    --padding-normal: 1.2rem;
    --padding-broad: 2rem;
    --padding-thin: 0.8rem;

    /* Border Properties */
    --border-width-thin: 1px;
    --border-width-medium: 2px;
    --border-width-thick: 4px;
    --border-radius-small: 4px;
    --border-radius-medium: 8px;
    --border-radius-large: 12px;

    /* Neutral Grays (used across components like terminal, hero, nav) */
    --color-black: #000000;
    --color-white: #ffffff;
    --color-gray-100: #f1f5f9;
    --color-gray-200: #e2e8f0;
    --color-gray-300: #cbd5e1;
    --color-gray-400: #94a3b8;
    --color-gray-500: #64748b;
    --color-gray-600: #475569;
    --color-gray-700: #334155;
    --color-gray-800: #1f2937;
    --color-gray-900: #0f172a;
}

/* ------------------------------------ *\
  #2. THEME VARIABLES
\* ------------------------------------ */

/* Dark Theme (Default) */
html,
html[data-theme="dark"] {
    --color-bg-main: var(--color-brown-dark);
    --color-bg-sub: #212121;
    --color-bg-footer: var(--color-workhorse-yellow);
    --color-text-main: #FAFAFC;
    --color-text-sub: #FFFEFF;
    --color-text-link: var(--color-brown-light);
    --color-border-dark: #494949;
    --color-border: var(--color-brown-light);
    --color-border-light: #74797f;
}

/* Light Theme */
html[data-theme="light"] {
    --color-bg-main: #e9edf6;
    --color-bg-sub: #ffffff;
    --color-bg-footer: var(--color-workhorse-yellow);
    --color-text-main: var(--color-brown-dark);
    --color-text-sub: #5D5D67;
    --color-text-link: var(--color-brown-light);
    --color-border-dark: #393939;
    --color-border: var(--color-brown-light);
    --color-border-light: #8797be;

    /* Light theme tuned grays */
    --color-gray-100: #f1f5f9;
    --color-gray-200: #e2e8f0;
    --color-gray-300: #cbd5e1;
    --color-gray-400: #94a3b8;
    --color-gray-500: #64748b;
    --color-gray-600: #475569;
    --color-gray-700: #334155;
    --color-gray-800: #1f2937;
    --color-gray-900: #0f172a;
}

/* Border Color References */
:root {
    --border-color-dark: var(--color-border-dark);
    --border-color-default: var(--color-border);
    --border-color-light: var(--color-border-light);
}