/* ═══════════════════════════════════════════════
   Margin Design System — Brand Tokens & UI Classes
   ═══════════════════════════════════════════════ */

:root {

    /* ── Typography Tokens ── */

    /* Font families */
    --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --font-display: 'Newsreader', Georgia, serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

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

    /* Type scale — sizes (largest → smallest) */
    --text-hero: clamp(3rem, 8vw, 6rem);
    --text-display: clamp(2.5rem, 6vw, 4rem);
    --text-h1: clamp(2rem, 3.5vw, 2.5rem);
    --text-h2: 1.5rem;
    --text-h3: 1.125rem;
    --text-body: 1rem;
    --text-small: 0.875rem;
    --text-caption: 0.75rem;
    --text-label: 0.75rem;      /* 12px — same as caption, distinct via weight/tracking/case */
    --text-meta: 0.6875rem;     /* 11px — scannable auxiliary */
    --text-micro: 0.625rem;     /* 10px — decorative chrome only */

    /* Type scale — line heights */
    --leading-hero: 0.9;
    --leading-display: 0.95;
    --leading-h1: 1.0;
    --leading-h2: 1.1;
    --leading-h3: 1.2;
    --leading-body: 1.6;
    --leading-small: 1.5;
    --leading-compact: 1.4;  /* caption, label, meta — all share the same line-height */
    --leading-micro: 1.3;

    /* Type scale — tracking */
    --tracking-hero: -0.03em;
    --tracking-display: -0.03em;
    --tracking-h1: -0.02em;
    --tracking-h2: 0.04em;
    --tracking-h3: 0;
    --tracking-body: 0;
    --tracking-small: 0;
    --tracking-caption: 0.03em;
    --tracking-label: 0.08em;
    --tracking-meta: 0.06em;
    --tracking-micro: 0.04em;

    /* Measure */
    --measure-body: 65ch;
    --measure-narrow: 45ch;

    /* ── Color Tokens ── */

    /* Ink scale */
    --ink-50: #F5F3F7;
    --ink-100: #E8E4EE;
    --ink-200: #CFC8DB;
    --ink-300: #B0A6C4;
    --ink-400: #8E82A9;
    --ink-500: #6E6290;
    --ink-600: #574D76;
    --ink-700: #41395A;
    --ink-800: #2D2640;
    --ink-900: #1A1525;
    --ink-950: #110F14;

    /* Violet scale */
    --violet-50: #F5F0FF;
    --violet-100: #EDE5FF;
    --violet-200: #D4BBFF;
    --violet-300: #BC94FF;
    --violet-400: #A375FC;
    --violet-500: #8B5CF6;
    --violet-600: #7340E0;
    --violet-700: #5C2DBF;
    --violet-800: #46219A;
    --violet-900: #311770;
    --violet-950: #1E0D45;

    /* Amber scale */
    --amber-50: #FFF8EB;
    --amber-100: #FEECC8;
    --amber-200: #FDD78F;
    --amber-300: #F6BF5C;
    --amber-400: #EAAB3A;
    --amber-500: #D49A2A;
    --amber-600: #AD7B1E;
    --amber-700: #845D16;
    --amber-800: #5E4110;
    --amber-900: #3B280B;
    --amber-950: #231806;

    /* Scarlet scale */
    --scarlet-50: #FEF2F2;
    --scarlet-100: #FDD8D8;
    --scarlet-200: #F9ADAD;
    --scarlet-300: #F28080;
    --scarlet-400: #E85A5A;
    --scarlet-500: #D93B3B;
    --scarlet-600: #B52A2A;
    --scarlet-700: #8C2020;
    --scarlet-800: #641818;
    --scarlet-900: #401111;
    --scarlet-950: #280A0A;

    /* Semantic */
    --white: var(--ink-50);  /* #F5F3F7 — no pure white in the system */

    /* Fixed context surfaces — for .theme-light / .theme-dark cards that don't change with page theme */
    --fixed-light-surface: var(--ink-100);
    --fixed-light-border: var(--ink-200);
    --fixed-dark-surface: var(--ink-800);
    --fixed-dark-border: var(--ink-700);

    /* ── Light Mode (default) ── */

    /* Surfaces */
    --surface-page: var(--ink-50);
    --surface-raised: var(--ink-100);  /* one step up from page — subtle lift */
    --surface-overlay: var(--ink-50);

    /* Text — contrast-tested against --surface-page (ink-50 #F5F3F7) */
    --color-heading: var(--ink-900);     /* #1A1525 — 15.5:1 */
    --color-body: var(--ink-800);        /* #2D2640 — 11.6:1 */
    --color-muted: var(--ink-500);       /* #6E6290 — 4.8:1  */
    --color-faint: var(--ink-300);       /* #B0A6C4 — 2.3:1  — decorative only */

    /* Accent */
    --color-accent: var(--violet-600);   /* #7340E0 — 5.1:1  */
    --color-accent-hover: var(--violet-700);
    --color-accent-subtle: var(--violet-50);

    /* Borders */
    --border: var(--ink-200);
    --border-strong: var(--ink-300);

    /* Highlight mode — dark content on violet-500, same in both themes */
    --hl-surface: var(--violet-500);
    --hl-heading: var(--ink-50);
    --hl-body: var(--ink-800);
    --hl-muted: var(--ink-500);
    --hl-border: var(--violet-300);

    /* ── Spacing Scale ── */
    --space-2xs: 0.25rem;   /* 4px */
    --space-xs: 0.5rem;     /* 8px */
    --space-sm: 0.75rem;    /* 12px */
    --space-md: 1rem;       /* 16px */
    --space-lg: 1.5rem;     /* 24px */
    --space-xl: 2rem;       /* 32px */
    --space-2xl: 3rem;      /* 48px */
    --space-3xl: 4rem;      /* 64px */
    --space-4xl: 6rem;      /* 96px */

    /* ── Radii ── */
    --radius-md: 8px;       /* form inputs */
    --radius-lg: 12px;      /* cards, code blocks, surfaces */
    --radius-full: 9999px;  /* pills: buttons, badges, code-inline, tooltips */
}

:root[data-theme="dark"] {
    color-scheme: dark;

    /* Surfaces */
    --surface-page: var(--ink-900);
    --surface-raised: var(--ink-800);
    --surface-overlay: var(--ink-700);

    /* Text — contrast-tested against --surface-page (ink-900 #1A1525) */
    --color-heading: var(--ink-50);      /* #F5F3F7 — 15.2:1 */
    --color-body: var(--ink-200);        /* #CFC8DB — 10.3:1 */
    --color-muted: var(--ink-400);       /* #8E82A9 — 4.7:1  */
    --color-faint: var(--ink-600);       /* #574D76 — 2.0:1  — decorative only */

    /* Accent */
    --color-accent: var(--violet-400);   /* #A375FC — 5.5:1  */
    --color-accent-hover: var(--violet-300);
    --color-accent-subtle: var(--violet-900);

    /* Borders */
    --border: var(--ink-700);
    --border-strong: var(--ink-600);

    /* Highlight mode — same in both themes */
    --hl-surface: var(--violet-500);
    --hl-heading: var(--ink-50);
    --hl-body: var(--ink-800);
    --hl-muted: var(--ink-500);
    --hl-border: var(--violet-300);
}


/* ═══════════════════════════════════════════════
   Typography Classes
   ═══════════════════════════════════════════════ */

/* ── Display / Headings (Newsreader) ── */

.t-hero {
    font-family: var(--font-display);
    font-size: var(--text-hero);
    font-weight: var(--weight-regular);
    line-height: var(--leading-hero);
    letter-spacing: var(--tracking-hero);
    color: var(--color-heading);
}

.t-display {
    font-family: var(--font-display);
    font-size: var(--text-display);
    font-weight: var(--weight-regular);
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-display);
    color: var(--color-heading);
}

.t-h1 {
    font-family: var(--font-display);
    font-size: var(--text-h1);
    font-weight: var(--weight-medium);
    line-height: var(--leading-h1);
    letter-spacing: var(--tracking-h1);
    color: var(--color-heading);
}

.t-h2 {
    font-family: var(--font-sans);
    font-size: var(--text-h2);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-h2);
    letter-spacing: var(--tracking-h2);
    color: var(--color-heading);
}

.t-h3 {
    font-family: var(--font-sans);
    font-size: var(--text-h3);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-h3);
    letter-spacing: var(--tracking-h3);
    color: var(--color-heading);
}

/* ── Body / UI Text (Plus Jakarta Sans) ── */

.t-body {
    font-family: var(--font-sans);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    letter-spacing: var(--tracking-body);
    color: var(--color-body);
}

.t-small {
    font-family: var(--font-sans);
    font-size: var(--text-small);
    line-height: var(--leading-small);
    letter-spacing: var(--tracking-small);
    color: var(--color-body);
}

.t-caption {
    font-family: var(--font-sans);
    font-size: var(--text-caption);
    line-height: var(--leading-compact);
    letter-spacing: var(--tracking-caption);
    color: var(--color-muted);
}

/* ── Data / Mono (JetBrains Mono) ── */

.t-label {
    font-family: var(--font-mono);
    font-size: var(--text-label);
    font-weight: var(--weight-medium);
    line-height: var(--leading-compact);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}

.t-meta {
    font-family: var(--font-mono);
    font-size: var(--text-meta);
    line-height: var(--leading-compact);
    letter-spacing: var(--tracking-meta);
}

.t-micro {
    font-family: var(--font-mono);
    font-size: var(--text-micro);
    line-height: var(--leading-micro);
    letter-spacing: var(--tracking-micro);
}

.t-data {
    font-family: var(--font-mono);
    font-size: var(--text-h2);
    line-height: var(--leading-h2);
    color: var(--color-heading);
}

/* ── Semantic Text Roles ── */

.t-muted { color: var(--color-muted); }
.t-accent { color: var(--color-accent); }
.t-faint { color: var(--color-faint); }
.t-uppercase { text-transform: uppercase; }

/* ── Editorial ── */

.t-blockquote,
.t-tagline {
    font-family: var(--font-display);
    font-size: var(--text-h1);
    font-weight: var(--weight-regular);
    line-height: var(--leading-h1);
    letter-spacing: var(--tracking-h1);
    color: var(--color-heading);
}


/* ═══════════════════════════════════════════════
   UI Component Classes
   ═══════════════════════════════════════════════ */

/* ── Structural Typography ── */

.subsection-title {
    font-family: var(--font-sans);
    font-size: var(--text-h3);
    font-weight: var(--weight-semibold);
    color: var(--color-heading);
    margin-bottom: var(--space-lg);
    transition: color .3s;
}

.subsection-desc {
    font-size: var(--text-body);
    line-height: var(--leading-body);
    color: var(--color-muted);
    max-width: var(--measure-narrow);
    margin-bottom: var(--space-lg);
}

.group-heading {
    font-family: var(--font-mono);
    font-size: var(--text-meta);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-accent);
    margin-top: var(--space-xl);
    margin-bottom: var(--space-sm);
}

.input-label {
    font-family: var(--font-sans);
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
    color: var(--color-heading);
    margin-bottom: var(--space-2xs);
    display: block;
}

/* ── Buttons ── */

.btn {
    font-family: var(--font-sans);
    font-size: var(--text-small);
    font-weight: var(--weight-semibold);
    line-height: 1;
    letter-spacing: var(--tracking-small);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background-color .2s, color .2s, border-color .2s;
}

.btn-sm {
    font-size: var(--text-caption);
    padding: var(--space-xs) var(--space-md);
}

.btn-md {
    font-size: var(--text-small);
    padding: var(--space-sm) var(--space-lg);
}

.btn-lg {
    font-size: var(--text-body);
    padding: var(--space-md) var(--space-xl);
}

.btn-primary {
    background: var(--color-accent);
    color: var(--white);
    border: 1px solid transparent;
}
.btn-primary:hover { background: var(--color-accent-hover); }
/* Dark override: --color-accent resolves to violet-400 (too light for filled buttons).
   Buttons use violet-500 anchor for better contrast against dark surfaces. */
[data-theme="dark"] .btn-primary { background: var(--violet-500); }
[data-theme="dark"] .btn-primary:hover { background: var(--violet-600); }

.btn-secondary {
    background: transparent;
    color: var(--color-accent);
    border: 1px solid var(--border-strong);
}
.btn-secondary:hover { border-color: var(--color-accent); color: var(--color-accent-hover); }

.btn-ghost {
    background: transparent;
    color: var(--color-muted);
    border: 1px solid var(--border);
}
.btn-ghost:hover { color: var(--color-accent); border-color: var(--color-accent); }


/* ── Form Inputs ── */

.input {
    font-family: var(--font-sans);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    color: var(--color-heading);
    background: var(--surface-page);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-md);
    transition: border-color .2s, background-color .3s, color .3s;
}
.input::placeholder { color: var(--color-faint); transition: color .3s; }
.input:focus { outline: none; border-color: var(--color-accent); }

.input-hint {
    font-size: var(--text-caption);
    color: var(--color-muted);
    margin-top: var(--space-2xs);
}

/* ── Badges ── */

.badge {
    font-family: var(--font-mono);
    font-size: var(--text-meta);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    line-height: 1;
    padding: var(--space-2xs) var(--space-xs);
    border-radius: var(--radius-full);
}

.badge-accent {
    background: var(--color-accent-subtle);
    color: var(--color-accent);
}

.badge-muted {
    background: var(--surface-raised);
    color: var(--color-muted);
    border: 1px solid var(--border);
}

/* ── Tooltips ── */

.tooltip {
    font-family: var(--font-sans);
    font-size: var(--text-caption);
    line-height: var(--leading-compact);
    color: var(--white);
    background: var(--ink-900);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-full);
    transition: background-color .3s, color .3s;
}
:root[data-theme="dark"] .tooltip {
    background: var(--ink-50);
    color: var(--ink-950);
}

/* ── Code ── */

.code-inline {
    font-family: var(--font-mono);
    font-size: 0.9em;
    color: var(--color-accent);
    background: var(--color-accent-subtle);
    border: 1px solid var(--border);
    padding: var(--space-2xs) var(--space-xs);
    border-radius: var(--radius-full);
    transition: color .3s, background-color .3s, border-color .3s;
}

.code-block {
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    line-height: var(--leading-body);
    color: var(--color-body);
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    overflow-x: auto;
    transition: color .3s, background-color .3s, border-color .3s;
}

/* ── Cards & Surfaces ── */

.card {
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    transition: border-color .2s, box-shadow .2s, transform .2s, background-color .3s;
}

.card-interactive {
    cursor: pointer;
}
.card-interactive:hover {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 1px var(--color-accent), 0 8px 24px rgba(139, 92, 246, 0.08);
    transform: translateY(-2px);
}
.card-interactive:active {
    transform: translateY(0);
    box-shadow: 0 0 0 1px var(--color-accent);
}
.card-interactive:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.card-glass {
    background: color-mix(in srgb, var(--surface-raised) 60%, transparent);
    backdrop-filter: blur(12px) saturate(1.2);
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
    border: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
}
.card-glass:hover {
    border-color: color-mix(in srgb, var(--color-accent) 30%, var(--border));
    box-shadow: inset 0 0.5px 0 0 rgba(139, 92, 246, 0.1), 0 0 24px rgba(139, 92, 246, 0.04);
}

.card-elevated {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.06);
}
.card-elevated:hover {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), 0 8px 32px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}
[data-theme="dark"] .card-elevated {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .card-elevated:hover {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 24px rgba(139, 92, 246, 0.06);
}

.card-overlay {
    background: var(--surface-overlay);
    border: 1px solid var(--border-strong);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.16), 0 2px 8px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
}
[data-theme="dark"] .card-overlay {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.card-title {
    font-family: var(--font-sans);
    font-size: var(--text-h3);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-h3);
    color: var(--color-heading);
    margin-bottom: var(--space-xs);
    transition: color .3s;
}

.card-body {
    font-size: var(--text-body);
    color: var(--color-body);
    line-height: var(--leading-body);
    transition: color .3s;
}

/* ── Layout ── */

.flex-row { display: flex; align-items: center; }
.flex-col { display: flex; flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-center { justify-content: center; }
.flex-between { justify-content: space-between; }
.flex-1 { flex: 1; }
.items-start { align-items: flex-start; }
.items-stretch { align-items: stretch; }
.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }
.gap-2xl { gap: var(--space-2xl); }
.gap-3xl { gap: var(--space-3xl); }
.w-full { width: 100%; }
.text-center { text-align: center; }
.block { display: block; }
.relative { position: relative; }

/* ── Spacing ── */

.mb-0 { margin-bottom: 0; }
.mb-2xs { margin-bottom: var(--space-2xs); }
.mb-xs { margin-bottom: var(--space-xs); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.mb-2xl { margin-bottom: var(--space-2xl); }
.mb-3xl { margin-bottom: var(--space-3xl); }
.mb-4xl { margin-bottom: var(--space-4xl); }

.mt-0 { margin-top: 0; }
.mt-2xs { margin-top: var(--space-2xs); }
.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }
.mt-3xl { margin-top: var(--space-3xl); }
.mt-4xl { margin-top: var(--space-4xl); }

.pb-xl { padding-bottom: var(--space-xl); }
.pb-2xl { padding-bottom: var(--space-2xl); }
.pt-2xl { padding-top: var(--space-2xl); }
.pt-3xl { padding-top: var(--space-3xl); }

/* ── Utility Classes ── */

.overflow-x { overflow-x: auto; }
.measure-body { max-width: var(--measure-body); }
.measure-narrow { max-width: var(--measure-narrow); }
.max-w-form { max-width: 400px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.svg-defs { position: absolute; width: 0; height: 0; }
.transition-color { transition: color .3s; }
.border-b { border-bottom: 1px solid var(--border); }

/* ── Page Components ── */

.page-footer {
    padding: var(--space-3xl) 0 var(--space-2xl);
    text-align: center;
}

.form-group {
    margin-bottom: var(--space-lg);
}

.input-full {
    width: 100%;
    margin-top: var(--space-2xs);
}

/* ── Showcase / Documentation ── */

.style-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
}

.style-item {
    border-bottom: 1px solid var(--border);
    padding-bottom: var(--space-xl);
}

.style-item:last-child {
    border-bottom: none;
}

.component-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    align-items: center;
}

.spacer-lg { height: var(--space-3xl); }
.spacer-xl { height: var(--space-4xl); }

/* ── Display Card ── */
.display-card {
    padding: 0;
    min-height: 400px;
    align-items: stretch;
    justify-content: stretch;
    gap: 0;
    overflow: hidden;
}
.display-card-header {
    width: 100%;
    padding: var(--space-lg) var(--space-xl) 0;
}
.display-card-specimen {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: var(--space-xl);
}
.display-card-footer {
    width: 100%;
    padding: 0 var(--space-xl) var(--space-lg);
    border-top: 1px solid var(--border);
    padding-top: var(--space-md);
}