/* ===========================================
   KAHLONETRICS — BASE DESIGN TOKENS
   Fonts & colors only. Component styles live in styles.css.
   =========================================== */

/* Self-hosted Instrument Serif (no third-party requests) */
@font-face {
    font-family: 'Instrument Serif';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/instrument-serif-regular-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Instrument Serif';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/instrument-serif-regular-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Instrument Serif';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/instrument-serif-italic-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Instrument Serif';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/instrument-serif-italic-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ===========================================
   COLOR SCHEME — DARK (default)
   =========================================== */
:root {
    /* Surfaces */
    --color-background:     #0d0d14;
    --color-surface:        #151923;
    --color-surface-alt:    #1a1a24;

    /* Text */
    --color-text:           #fefefd;
    --color-text-secondary: rgba(255, 255, 255, 0.9);
    --color-text-muted:     rgba(255, 255, 255, 0.5);

    /* Brand accent — primary (red) */
    --color-accent:         #e94560;
    --color-accent-hover:   #d63851;
    --color-accent-bg:      rgba(233, 69, 96, 0.3);
    --color-accent-glow:    rgba(233, 69, 96, 0.45);

    /* Brand accent — secondary (electric cyan, for data viz) */
    --color-accent-2:       #4dd4ff;
    --color-accent-2-hover: #38b8e5;
    --color-accent-2-bg:    rgba(77, 212, 255, 0.15);
    --color-accent-2-glow:  rgba(77, 212, 255, 0.45);

    /* Tiles / cards */
    --color-tile-bg:        rgba(255, 255, 255, 0.1);
    --color-tile-bg-hover:  rgba(255, 255, 255, 0.2);
    --color-tile-border:    rgba(255, 255, 255, 0.2);

    /* Utility */
    --color-shadow:         rgba(0, 0, 0, 0.4);
    --color-shadow-tinted:  rgba(233, 69, 96, 0.18);
    --color-success:        #48bb78;

    /* ---------- TYPOGRAPHY ---------- */
    --font-family-base:     'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-family-display:  'Instrument Serif', 'Georgia', serif;

    /* Font sizes */
    --font-size-xs:         12px;
    --font-size-sm:         13px;
    --font-size-base:       14px;
    --font-size-md:         15px;
    --font-size-lg:         16px;
    --font-size-xl:         18px;
    --font-size-2xl:        20px;
    --font-size-3xl:        22px;
    --font-size-4xl:        24px;
    --font-size-5xl:        28px;
    --font-size-6xl:        32px;
    --font-size-display:    64px;

    /* Font weights */
    --font-weight-light:    300;
    --font-weight-regular:  400;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;

    /* Line heights */
    --line-height-tight:    1.2;
    --line-height-snug:     1.5;
    --line-height-normal:   1.6;
    --line-height-relaxed:  1.7;

    /* Letter spacing */
    --letter-spacing-tight: -0.01em;
    --letter-spacing-wide:  1px;
}

/* ===========================================
   COLOR SCHEME — LIGHT
   =========================================== */
[data-theme="light"] {
    --color-background:     #f5f5f7;
    --color-surface:        #ffffff;
    --color-surface-alt:    #f0f0f3;

    --color-text:           #1a1a2e;
    --color-text-secondary: rgba(26, 26, 46, 0.85);
    --color-text-muted:     rgba(26, 26, 46, 0.5);

    --color-accent:         #e94560;
    --color-accent-hover:   #d63851;
    --color-accent-bg:      rgba(233, 69, 96, 0.15);

    --color-tile-bg:        rgba(0, 0, 0, 0.04);
    --color-tile-bg-hover:  rgba(0, 0, 0, 0.08);
    --color-tile-border:    rgba(0, 0, 0, 0.12);

    --color-shadow:         rgba(0, 0, 0, 0.12);
    --color-shadow-tinted:  rgba(233, 69, 96, 0.12);
    --color-success:        #2f9e5f;

    /* Secondary accent for light mode (sky blue, more legible on light backgrounds) */
    --color-accent-2:       #0ea5e9;
    --color-accent-2-hover: #0284c7;
    --color-accent-2-bg:    rgba(14, 165, 233, 0.12);
    --color-accent-2-glow:  rgba(14, 165, 233, 0.35);
}

/* ===========================================
   BASE RESET & TYPOGRAPHY
   =========================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--color-text);
    background-color: var(--color-background);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-family-base);
    color: var(--color-text);
    background: var(--color-background);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Headings — base sans for all. .hero-tagline opts into display serif. */
h1 {
    font-family: var(--font-family-base);
    font-size: var(--font-size-6xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    line-height: var(--line-height-tight);
}

h2 {
    font-family: var(--font-family-base);
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    line-height: var(--line-height-tight);
}

h3 {
    font-family: var(--font-family-base);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    line-height: var(--line-height-snug);
}

h4 {
    font-family: var(--font-family-base);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    line-height: var(--line-height-snug);
}

p {
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
}

a {
    color: var(--color-accent);
    text-decoration: none;
    transition: opacity 0.3s ease, color 0.3s ease;
}

a:hover {
    opacity: 0.7;
}

strong {
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
}

small {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}