/* ============================================================
   TIMER WEBSITE - tos-site.css
   TOS token system, dark-first ("TOS, lights off").
   Copy-adaptation of the product's tos-app.css token blocks.
   The ONLY file in this project allowed to contain hex colors.
   Spec: Timer_Website_Build_Spec_v1.0.md section 4
   ============================================================ */

/* ---- Fonts (self-hosted VARIABLE fonts, latin subset;
        fallback stacks work without files) ---- */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/montserrat-var.woff2') format('woff2');
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url('../fonts/jetbrains-mono-var.woff2') format('woff2');
}

/* ============================================================
   TOKENS - dark is the ROOT default (the site is dark).
   Values verified against product tos-app.css 2026-07-04.
   ============================================================ */
:root {
    color-scheme: dark;

    /* ---- Surfaces ---- */
    --tos-bg:                  #0a0a09;
    --tos-surface:             #17171a;
    --tos-surface-raised:      #1f1f23;
    --tos-surface-sunken:      #0f0f12;
    --tos-surface-hover:       #232328;

    /* ---- Borders ---- */
    --tos-border:              #2a2a30;
    --tos-border-strong:       #3a3a42;
    --tos-border-faint:        #1c1c20;
    --tos-rule:                #232328;

    /* ---- Text ---- */
    --tos-text:                #fafaf7;
    --tos-text-secondary:      #c8c8c4;
    --tos-text-muted:          #98989a;
    --tos-text-dim:            #66666a;
    --tos-text-inverse:        #0a0a09;

    /* ---- Accent: Timer orange ---- */
    --tos-accent:              #fb923c;
    --tos-accent-strong:       #f97316;
    --tos-accent-bg:           rgba(251, 146, 60, 0.18);
    --tos-accent-border:       rgba(251, 146, 60, 0.42);

    /* ---- System purple (AI-layer color in diagrams ONLY) ---- */
    --tos-system:              #7c3aed;
    --tos-system-bg:           rgba(124, 58, 237, 0.18);
    --tos-system-border:       rgba(124, 58, 237, 0.42);

    /* ---- Semantic ---- */
    --tos-ok:                  #059669;
    --tos-ok-bg:               rgba(5, 150, 105, 0.18);
    --tos-error:               #dc2626;
    --tos-error-bg:            rgba(220, 38, 38, 0.18);

    /* ---- Type ---- */
    --tos-font-body:           'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --tos-font-mono:           'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    /* ---- Product scale (chrome-sized elements) ---- */
    --tos-text-xs:             0.72rem;
    --tos-text-sm:             0.82rem;
    --tos-text-base:           0.92rem;
    --tos-text-md:             1.02rem;
    --tos-text-lg:             1.18rem;
    --tos-text-xl:             1.42rem;
    --tos-text-2xl:            1.78rem;
    --tos-text-3xl:            2.4rem;

    /* ---- SITE editorial display scale (the slower tempo) ----
       DISPLAY VOICE IS MONO (founder directive 2026-07-04): the
       site speaks in the system's own typeface. Body prose stays
       Montserrat for reading contrast. Mono runs wide, so the
       scale is tuned tighter than a sans display scale would be. ---- */
    --site-font-display:       var(--tos-font-mono);
    --site-text-display:       clamp(2.1rem, 5.2vw, 4.1rem);
    --site-text-title:         clamp(1.5rem, 3vw, 2.4rem);
    --site-text-statement:     clamp(1.15rem, 2vw, 1.6rem);
    --site-text-body:          1.02rem;
    --site-leading-display:    1.14;
    --site-leading-body:       1.7;
    --site-tracking-display:   -0.045em;

    --tos-leading-tight:       1.2;
    --tos-leading-snug:        1.45;
    --tos-leading-normal:      1.55;
    --tos-leading-relaxed:     1.7;
    --tos-tracking-mono:       1.4px;
    --tos-tracking-mono-tight: 0.8px;

    /* ---- Spacing ---- */
    --tos-space-1:             4px;
    --tos-space-2:             8px;
    --tos-space-3:             12px;
    --tos-space-4:             16px;
    --tos-space-5:             20px;
    --tos-space-6:             24px;
    --tos-space-8:             32px;
    --tos-space-10:            40px;
    --tos-space-12:            48px;
    --tos-space-16:            64px;
    --site-section-pad:        clamp(96px, 14vh, 160px);
    --site-block-gap:          clamp(40px, 6vh, 72px);

    /* ---- Radii / shadows / motion ---- */
    --tos-radius-sm:           4px;
    --tos-radius:              6px;
    --tos-radius-md:           8px;
    --tos-radius-lg:           10px;
    --tos-radius-full:         999px;
    --tos-shadow-flat:         0 1px 0 var(--tos-border);
    --tos-shadow-card:         0 1px 2px rgba(0, 0, 0, 0.45), 0 1px 1px rgba(0, 0, 0, 0.30);
    --tos-ease:                cubic-bezier(0.4, 0, 0.2, 1);
    --tos-duration:            0.15s;
    --tos-duration-slow:       0.25s;

    /* ---- Geometry ---- */
    --site-nav-h:              64px;
    --site-max-w:              1200px;
    --site-max-w-wide:         1560px;
    --site-max-w-prose:        720px;
    --site-pad-x:              24px;
}

/* ============================================================
   LIGHT THEME - present and token-complete, unused in v1.
   (Product light values.) Flip with html[data-theme="light"].
   ============================================================ */
html[data-theme="light"] {
    color-scheme: light;

    --tos-bg:                  #fafaf9;
    --tos-surface:             #ffffff;
    --tos-surface-raised:      #ffffff;
    --tos-surface-sunken:      #f5f4f1;
    --tos-surface-hover:       #f5f4f1;

    --tos-border:              #e5e5e2;
    --tos-border-strong:       #d4d4d0;
    --tos-border-faint:        #f0efec;
    --tos-rule:                #e8e7e3;

    --tos-text:                #0a0612;
    --tos-text-secondary:      #4b5563;
    --tos-text-muted:          #6b7280;
    --tos-text-dim:            #9ca3af;
    --tos-text-inverse:        #ffffff;

    --tos-accent-bg:           rgba(251, 146, 60, 0.08);
    --tos-accent-border:       rgba(251, 146, 60, 0.32);
    --tos-system-bg:           rgba(124, 58, 237, 0.06);
    --tos-system-border:       rgba(124, 58, 237, 0.24);
    --tos-ok-bg:               rgba(5, 150, 105, 0.08);
    --tos-error-bg:            rgba(220, 38, 38, 0.06);

    --tos-shadow-card:         0 1px 2px rgba(10, 6, 18, 0.04), 0 1px 1px rgba(10, 6, 18, 0.03);
}

/* ============================================================
   RESET + BASE
   ============================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--tos-font-body);
    font-size: var(--site-text-body);
    line-height: var(--site-leading-body);
    color: var(--tos-text-secondary);
    background: var(--tos-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
    color: var(--tos-text);
    font-family: var(--site-font-display);
    font-weight: 500;
    letter-spacing: var(--site-tracking-display);
    margin: 0;
}

p {
    margin: 0 0 1em;
}

a {
    color: var(--tos-accent);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

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

button {
    font-family: inherit;
    cursor: pointer;
}

::selection {
    background: var(--tos-accent-bg);
    color: var(--tos-text);
}

/* Visible focus for keyboard users */
:focus-visible {
    outline: 2px solid var(--tos-accent-border);
    outline-offset: 2px;
}

/* Skip link (a11y) */
.site-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 10000;
    padding: 10px 16px;
    background: var(--tos-surface-raised);
    color: var(--tos-text);
    border: 1px solid var(--tos-accent-border);
    border-radius: var(--tos-radius-md);
    font-family: var(--tos-font-mono);
    font-size: var(--tos-text-sm);
}

.site-skip:focus {
    left: var(--tos-space-4);
    top: var(--tos-space-4);
}

/* Reduced motion: kill everything */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}