/* ============================================================
 *  overthrow.systems — base stylesheet
 *  Covers: tokens, typography, layout primitives, components
 *  All landing pages and web apps extend from this file.
 *  ============================================================ */

/* ── Fonts ─────────────────────────────────────────────────── */

@font-face {
    font-family: 'HyperScrypt';
    src: url('/static/brand/fonts/HyperScrypt.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sixtyfour';
    src: url('/static/brand/fonts/Sixtyfour.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cormorant';
    src: url('/static/brand/fonts/Cormorant.ttf') format('truetype');
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cormorant';
    src: url('/static/brand/fonts/Cormorant-Italic.ttf') format('truetype');
    font-weight: 300 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Satisfy';
    src: url('/static/brand/fonts/Satisfy.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Tulpen_One';
    src: url('/static/brand/fonts/Tulpen_One.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fascinate';
    src: url('/static/brand/fonts/Fascinate.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'FascinateInline';
    src: url('/static/brand/fonts/FascinateInline.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Mourier';
    src: url('/static/brand/fonts/Mourier.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Borges';
    src: url('/static/brand/fonts/Borges.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


/* ── Design Tokens ─────────────────────────────────────────── */

:root {
    /* Color — use black text on these */
    --color-main:   #f7ae12;
    --color-light:  #fbcd93;
    --color-dark:   #c87705;

    /* Color — use white text on these */
    --color-clight: #5487f5;
    --color-cdark:  #3360c8;
    --color-alert:  #702caa;

    /* Surfaces */
    --surface-base:    #0d0d0d;
    --surface-raised:  #181818;
    --surface-border:  #2a2a2a;

    /* Text */
    --text-primary:    #f0ece3;
    --text-secondary:  #a89f90;
    --text-on-amber:   #0d0d0d;
    --text-on-blue:    #ffffff;

    /* Typography — roles */
    --font-logo-primary:   'Sixtyfour',   monospace;
    --font-logo-secondary: 'HyperScrypt', sans-serif;
    --font-display:        'Tulpen_One',  sans-serif;
    --font-body:           'Cormorant',   serif;
    --font-accent:         'Satisfy',     cursive;

    /* Type scale (fluid, clamp-based) */
    --text-xs:   clamp(0.7rem,  1vw,    0.8rem);
    --text-sm:   clamp(0.85rem, 1.2vw,  1rem);
    --text-base: clamp(1rem,    1.5vw,  1.15rem);
    --text-md:   clamp(1.2rem,  2vw,    1.5rem);
    --text-lg:   clamp(1.5rem,  3vw,    2rem);
    --text-xl:   clamp(2rem,    5vw,    3.5rem);
    --text-2xl:  clamp(3rem,    8vw,    6rem);
    --text-hero: clamp(4rem,    12vw,   10rem);

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

    /* Layout */
    --max-width:       1200px;
    --max-width-prose: 68ch;
    --gutter:          clamp(1rem, 4vw, 2.5rem);

    /* Grid */
    --cols: 12;
    --col-gap: clamp(0.75rem, 2vw, 1.5rem);

    /* Borders & Radius */
    --radius-sm:  2px;
    --radius-md:  6px;
    --radius-lg:  12px;
    --radius-pill: 9999px;
    --border-hairline: 1px solid var(--surface-border);
    --border-amber:    1px solid var(--color-dark);

    /* Shadows */
    --shadow-sm:  0 1px 3px rgba(0,0,0,0.5);
    --shadow-md:  0 4px 16px rgba(0,0,0,0.6);
    --shadow-glow-amber: 0 0 24px rgba(247,174,18,0.25);
    --shadow-glow-blue:  0 0 24px rgba(84,135,245,0.2);

    /* Transitions */
    --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
    --ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast:   150ms;
    --duration-base:   280ms;
    --duration-slow:   500ms;

    /* Z-index layers */
    --z-below:   -1;
    --z-base:     0;
    --z-raised:  10;
    --z-overlay: 100;
    --z-modal:   200;
    --z-toast:   300;
}


/* ── Reset & Base ───────────────────────────────────────────── */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.65;
    color: var(--text-primary);
    background-color: var(--surface-base);
    min-height: 100dvh;
}

img, video, svg {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

ul, ol {
    list-style: none;
}

button {
    cursor: pointer;
    font-family: inherit;
    border: none;
    background: none;
}

input, textarea, select {
    font-family: inherit;
    font-size: inherit;
}

:focus-visible {
    outline: 2px solid var(--color-main);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}


/* ── Typography ─────────────────────────────────────────────── */

/* Logo wordmark — primary mechanical identity */
.logo,
.font-logo {
    font-family: var(--font-logo-primary);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Logo sub-mark — humanist contrast to the grid */
.logo-sub,
.font-logo-secondary {
    font-family: var(--font-logo-secondary);
}

/* Display — tall, compressed headlines */
h1, h2, h3,
.font-display {
    font-family: var(--font-display);
    font-weight: normal;
    line-height: 1.05;
    letter-spacing: 0.01em;
}

h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
h4 { font-family: var(--font-body); font-size: var(--text-md); font-weight: 600; }
h5 { font-family: var(--font-body); font-size: var(--text-base); font-weight: 600; }
h6 { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }

/* Hero scale — use sparingly, one per page */
.text-hero   { font-size: var(--text-hero); line-height: 0.9; }
.text-2xl    { font-size: var(--text-2xl); }
.text-xl     { font-size: var(--text-xl); }
.text-lg     { font-size: var(--text-lg); }
.text-md     { font-size: var(--text-md); }
.text-base   { font-size: var(--text-base); }
.text-sm     { font-size: var(--text-sm); }
.text-xs     { font-size: var(--text-xs); }

/* Body — Cormorant for long-form prose */
p, li, td, th {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.7;
}

/* Accent / callout — handwritten warmth */
.font-accent {
    font-family: var(--font-accent);
    font-weight: normal;
}

/* Monospace utility — system mono for code/data */
code, pre, kbd, samp,
.font-mono {
    font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
    font-size: 0.9em;
}

pre {
    overflow-x: auto;
    padding: var(--space-6);
    background: var(--surface-raised);
    border: var(--border-hairline);
    border-radius: var(--radius-md);
    line-height: 1.5;
}

/* Eyebrow label — section identifier above headings */
.eyebrow {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-main);
}

/* Amber highlight span — inline emphasis */
.highlight {
    color: var(--color-main);
}

.highlight-blue {
    color: var(--color-clight);
}

/* Text color utilities */
.text-primary   { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-amber     { color: var(--color-main); }
.text-amber-dark { color: var(--color-dark); }
.text-blue      { color: var(--color-clight); }
.text-blue-dark { color: var(--color-cdark); }
.text-alert     { color: var(--color-alert); }
.text-black     { color: var(--text-on-amber); }
.text-white     { color: #ffffff; }


/* ── Layout ─────────────────────────────────────────────────── */

.container {
    width: 100%;
    max-width: var(--max-width);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.container--narrow {
    max-width: var(--max-width-prose);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.container--wide {
    max-width: 1440px;
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* Section vertical rhythm */
.section {
    padding-block: var(--space-24);
}

.section--sm {
    padding-block: var(--space-12);
}

.section--lg {
    padding-block: var(--space-32);
}

/* 12-column CSS grid */
.grid {
    display: grid;
    grid-template-columns: repeat(var(--cols), 1fr);
    gap: var(--col-gap);
}

/* Common span presets */
.col-full   { grid-column: 1 / -1; }
.col-half   { grid-column: span 6; }
.col-third  { grid-column: span 4; }
.col-two-thirds { grid-column: span 8; }
.col-quarter    { grid-column: span 3; }

@media (max-width: 768px) {
    .col-half,
    .col-third,
    .col-two-thirds,
    .col-quarter {
        grid-column: 1 / -1;
    }
}

/* Flexbox utilities */
.flex           { display: flex; }
.flex-col       { flex-direction: column; }
.flex-wrap      { flex-wrap: wrap; }
.items-center   { align-items: center; }
.items-start    { align-items: flex-start; }
.items-end      { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between{ justify-content: space-between; }
.justify-end    { justify-content: flex-end; }
.gap-2  { gap: var(--space-2); }
.gap-4  { gap: var(--space-4); }
.gap-6  { gap: var(--space-6); }
.gap-8  { gap: var(--space-8); }
.gap-12 { gap: var(--space-12); }


/* ── Surfaces ───────────────────────────────────────────────── */

.surface          { background-color: var(--surface-base); }
.surface-raised   { background-color: var(--surface-raised); }
.surface-amber    { background-color: var(--color-main);   color: var(--text-on-amber); }
.surface-dark-amber { background-color: var(--color-dark); color: var(--text-on-amber); }
.surface-blue     { background-color: var(--color-cdark);  color: var(--text-on-blue); }
.surface-alert    { background-color: var(--color-alert);  color: var(--text-on-blue); }

/* Rule / divider */
.rule {
    border: none;
    border-top: var(--border-hairline);
    margin-block: var(--space-8);
}

.rule--amber {
    border-top: var(--border-amber);
}


/* ── Navigation ─────────────────────────────────────────────── */

.nav {
    position: sticky;
    top: 0;
    z-index: var(--z-overlay);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: var(--space-4);
    padding-inline: var(--gutter);
    background: rgba(13, 13, 13, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: var(--border-hairline);
}

.nav__brand {
    font-family: var(--font-logo-primary);
    font-size: var(--text-md);
    letter-spacing: 0.04em;
    color: var(--color-main);
    text-transform: uppercase;
}

.nav__links {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.nav__link {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-secondary);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: color var(--duration-fast) var(--ease-out);
}

.nav__link:hover,
.nav__link[aria-current="page"] {
    color: var(--color-main);
}

.nav__cta {
    margin-left: var(--space-4);
}

@media (max-width: 640px) {
    .nav__links {
        gap: var(--space-4);
    }

    .nav__link {
        display: none;
    }

    .nav__link--always {
        display: block;
    }
}


/* ── Hero ───────────────────────────────────────────────────── */

.hero {
    position: relative;
    min-height: 92dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: var(--space-32) var(--space-24);
    padding-inline: var(--gutter);
    overflow: hidden;
}

/* Amber underline rule — the signature element */
.hero__headline {
    font-family: var(--font-display);
    font-size: var(--text-hero);
    line-height: 0.88;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    max-width: 14ch;
}

.hero__headline em {
    font-style: normal;
    color: var(--color-main);
    /* Tight amber underline drawn via box-shadow — not a border, so it shifts with the text */
    box-shadow: 0 6px 0 var(--color-dark);
}

.hero__sub {
    font-family: var(--font-body);
    font-size: var(--text-lg);
    font-weight: 300;
    color: var(--text-secondary);
    max-width: 50ch;
    margin-top: var(--space-8);
    line-height: 1.5;
}

.hero__accent {
    font-family: var(--font-accent);
    font-size: var(--text-xl);
    color: var(--color-main);
    margin-top: var(--space-4);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-12);
}

/* Decorative grid lines behind hero — extend in per-page sheets */
.hero__bg-grid {
    position: absolute;
    inset: 0;
    z-index: var(--z-below);
    background-image:
    linear-gradient(rgba(247,174,18,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(247,174,18,0.04) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
}


/* ── Buttons ─────────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: var(--space-3) var(--space-8);
    border-radius: var(--radius-sm);
    transition:
    background-color var(--duration-fast) var(--ease-out),
    color            var(--duration-fast) var(--ease-out),
    box-shadow       var(--duration-fast) var(--ease-out),
    transform        var(--duration-fast) var(--ease-snap);
    white-space: nowrap;
    user-select: none;
}

.btn:active {
    transform: translateY(1px);
}

/* Primary — amber fill, black text */
.btn--primary {
    background-color: var(--color-main);
    color: var(--text-on-amber);
}

.btn--primary:hover {
    background-color: var(--color-dark);
    box-shadow: var(--shadow-glow-amber);
}

/* Secondary — ghost with amber border */
.btn--secondary {
    background-color: transparent;
    color: var(--color-main);
    border: 1px solid var(--color-dark);
}

.btn--secondary:hover {
    background-color: rgba(247,174,18,0.08);
    border-color: var(--color-main);
}

/* Blue CTA */
.btn--blue {
    background-color: var(--color-cdark);
    color: var(--text-on-blue);
}

.btn--blue:hover {
    background-color: var(--color-clight);
    box-shadow: var(--shadow-glow-blue);
}

/* Alert / destructive */
.btn--alert {
    background-color: var(--color-alert);
    color: var(--text-on-blue);
}

.btn--alert:hover {
    filter: brightness(1.15);
}

/* Ghost text-only */
.btn--ghost {
    color: var(--text-secondary);
    padding-inline: var(--space-4);
}

.btn--ghost:hover {
    color: var(--text-primary);
}

/* Size modifiers */
.btn--sm {
    font-size: var(--text-xs);
    padding: var(--space-2) var(--space-4);
}

.btn--lg {
    font-size: var(--text-base);
    padding: var(--space-4) var(--space-12);
}

.btn--pill {
    border-radius: var(--radius-pill);
}

.btn[disabled],
.btn--disabled {
    opacity: 0.4;
    pointer-events: none;
}


/* ── Badges & Tags ───────────────────────────────────────────── */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 2px var(--space-3);
    border-radius: var(--radius-pill);
}

.badge--amber  { background: rgba(247,174,18,0.15); color: var(--color-main); }
.badge--blue   { background: rgba(84,135,245,0.15); color: var(--color-clight); }
.badge--alert  { background: rgba(112,44,170,0.15); color: var(--color-alert); }
.badge--muted  { background: var(--surface-raised);  color: var(--text-secondary); }
.badge--solid-amber { background: var(--color-main);  color: var(--text-on-amber); }
.badge--solid-blue  { background: var(--color-cdark); color: var(--text-on-blue); }


/* ── Alerts & Notices ────────────────────────────────────────── */

.alert {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
    padding: var(--space-4) var(--space-6);
    border-radius: var(--radius-md);
    border-left: 3px solid;
    font-family: var(--font-body);
    font-size: var(--text-sm);
}

.alert--info    { background: rgba(84,135,245,0.08); border-color: var(--color-clight); color: var(--color-clight); }
.alert--warning { background: rgba(247,174,18,0.08); border-color: var(--color-main);   color: var(--color-main); }
.alert--danger  { background: rgba(112,44,170,0.08); border-color: var(--color-alert);  color: var(--color-alert); }
.alert--success { background: rgba(84,135,245,0.06); border-color: var(--color-clight); color: var(--color-clight); }


/* ── Status indicators ───────────────────────────────────────── */

.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-dot--active  { background: var(--color-main); box-shadow: 0 0 0 3px rgba(247,174,18,0.2); }
.status-dot--idle    { background: var(--text-secondary); }
.status-dot--error   { background: var(--color-alert); }
.status-dot--blue    { background: var(--color-clight); }


/* ── Utility Classes ─────────────────────────────────────────── */

/* Display */
.block         { display: block; }
.inline-block  { display: inline-block; }
.hidden        { display: none; }

/* Position */
.relative { position: relative; }
.absolute { position: absolute; }
.sticky   { position: sticky; }

/* Overflow */
.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }

/* Spacing */
.mt-auto  { margin-top: auto; }
.mb-0     { margin-bottom: 0; }
.mt-4     { margin-top: var(--space-4); }
.mt-8     { margin-top: var(--space-8); }
.mt-12    { margin-top: var(--space-12); }
.mb-4     { margin-bottom: var(--space-4); }
.mb-8     { margin-bottom: var(--space-8); }
.mb-12    { margin-bottom: var(--space-12); }
.mx-auto  { margin-inline: auto; }
.p-4      { padding: var(--space-4); }
.p-6      { padding: var(--space-6); }
.p-8      { padding: var(--space-8); }
.px-4     { padding-inline: var(--space-4); }
.py-4     { padding-block: var(--space-4); }

/* Text alignment */
.text-left    { text-align: left; }
.text-center  { text-align: center; }
.text-right   { text-align: right; }

/* Weight */
.font-light   { font-weight: 300; }
.font-normal  { font-weight: 400; }
.font-medium  { font-weight: 500; }
.font-semibold{ font-weight: 600; }
.font-bold    { font-weight: 700; }

/* Width */
.w-full  { width: 100%; }
.w-auto  { width: auto; }

/* Opacity */
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }

/* Border */
.border      { border: var(--border-hairline); }
.border-amber{ border: var(--border-amber); }
.rounded     { border-radius: var(--radius-md); }
.rounded-sm  { border-radius: var(--radius-sm); }
.rounded-lg  { border-radius: var(--radius-lg); }


/* ── Print ───────────────────────────────────────────────────── */

@media print {
    :root {
        --surface-base:   #ffffff;
        --surface-raised: #f5f5f5;
        --text-primary:   #000000;
        --text-secondary: #444444;
    }

    .nav,
    .hero__bg-grid {
        display: none;
    }

    .btn {
        border: 1px solid currentColor;
        background: transparent !important;
        color: #000 !important;
    }

    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.75em;
        color: #666;
    }
}