/* ============================================================
   OnlyCharr — Design tokens
   The single source of truth for colour, type, space and motion.

   Loaded FIRST, before every other stylesheet, on every layout.
   Nothing else may declare :root. If you need a new value, add a
   token here rather than hardcoding it at the call site.
   ============================================================ */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/inter-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/inter-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/inter-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/inter-700.woff2') format('woff2');
}

:root {
    /* Tells the browser to render native scrollbars, select popups,
       date pickers and autofill in dark. One line, whole-app effect. */
    color-scheme: dark;

    /* ---- Surfaces -------------------------------------------------
       Neutral greys with a barely-perceptible cool cast. Deliberately
       NOT navy: the previous #060c1a base read as a crypto dashboard. */
    --bg-base:      #16181c;
    --bg-surface:   #1e2126;
    --bg-elevated:  #262a31;
    --bg-raised:    #2e333b;
    --bg-input:     #1a1d22;
    --bg-hover:     rgba(255, 255, 255, 0.055);
    --bg-active:    rgba(255, 255, 255, 0.09);
    --bg-scrim:     rgba(10, 11, 13, 0.72);

    /* Legacy alias — older rules still reference this. */
    --bg-card:      var(--bg-surface);
    --bg-header:    rgba(22, 24, 28, 0.92);

    /* ---- Borders --------------------------------------------------
       --border-medium and up clear 3:1 so input and control edges are
       actually perceivable. The old values sat at 1.1:1. */
    --border-subtle: rgba(255, 255, 255, 0.08);
    --border-medium: rgba(255, 255, 255, 0.16);
    --border-strong: rgba(255, 255, 255, 0.26);
    --border-accent: rgba(0, 175, 240, 0.45);
    --border-focus:  #4cc4f7;

    /* ---- Text — every value below clears 4.5:1 on --bg-base ------- */
    --text-primary:   #e8eaed;  /* 13.6:1 */
    --text-secondary: #b6bcc6;  /*  8.6:1 */
    --text-muted:     #8b929e;  /*  5.4:1 */
    --text-dimmed:    #79808c;  /*  4.6:1 — was #6a7195 at 4.1:1 */
    --text-on-accent: #04141c;
    --text-inverse:   #16181c;

    /* ---- Accent ---------------------------------------------------
       One flat blue, no gradient. The cyan→violet gradient was applied
       to text in eight places and was the loudest "template" signal. */
    --accent:        #00aff0;
    --accent-hover:  #1cbcf7;
    --accent-active: #0d9ad4;
    --accent-soft:   rgba(0, 175, 240, 0.14);
    --accent-softer: rgba(0, 175, 240, 0.07);
    --accent-glow:   rgba(0, 175, 240, 0.30);

    /* Retained so old rules referencing the gradient stay on-palette
       instead of falling back to transparent. */
    --accent-start:    #00aff0;
    --accent-end:      #00aff0;
    --accent-gradient: #00aff0;

    /* ---- Semantic — distinct from the accent hue ------------------ */
    --success:        #2fd07a;
    --success-bg:     rgba(47, 208, 122, 0.13);
    --success-border: rgba(47, 208, 122, 0.35);

    --danger:         #ff5c5c;
    --danger-bg:      rgba(255, 92, 92, 0.13);
    --danger-border:  rgba(255, 92, 92, 0.35);

    --warning:        #ffb020;
    --warning-bg:     rgba(255, 176, 32, 0.13);
    --warning-border: rgba(255, 176, 32, 0.35);

    --info:           #4cc4f7;
    --info-bg:        rgba(76, 196, 247, 0.11);
    --info-border:    rgba(76, 196, 247, 0.30);

    /* Legacy aliases used across older rules. */
    --green: var(--success); --green-bg: var(--success-bg);
    --green-border: var(--success-border); --green-text: var(--success);
    --red: var(--danger); --red-bg: var(--danger-bg);
    --red-border: var(--danger-border); --red-text: var(--danger);
    --yellow-bg: var(--warning-bg); --yellow-border: var(--warning-border);
    --yellow-text: var(--warning);
    --info-text: var(--info);

    /* ---- Tier colours — one scale, used by every surface ---------- */
    --tier-free:       #8b929e;
    --tier-follower:   #2fd07a;
    --tier-subscriber: #00aff0;
    --tier-premium:    #b57bff;

    /* ---- Type -----------------------------------------------------
       7 steps on a ~1.2 ratio, replacing 30 ad-hoc sizes. Each size
       carries its own line-height so callers never have to guess. */
    --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'Cascadia Mono', Consolas, ui-monospace, monospace;

    --fs-xs:   0.75rem;   --lh-xs:   1.45;
    --fs-sm:   0.8125rem; --lh-sm:   1.5;
    --fs-base: 0.9375rem; --lh-base: 1.55;
    --fs-md:   1.0625rem; --lh-md:   1.5;
    --fs-lg:   1.25rem;   --lh-lg:   1.35;
    --fs-xl:   1.5rem;    --lh-xl:   1.28;
    --fs-2xl:  1.875rem;  --lh-2xl:  1.2;
    --fs-3xl:  2.25rem;   --lh-3xl:  1.15;

    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semi:   600;
    --fw-bold:   700;

    --tracking-tight: -0.011em;
    --tracking-wide:   0.02em;
    --tracking-caps:   0.06em;

    /* ---- Space — 4px base, 8 steps, replacing 30 one-off values --- */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 3rem;
    --sp-8: 4rem;

    /* ---- Radius ---------------------------------------------------
       Tightened from the old scale: OF-style surfaces are squarer. */
    --radius-sm:   0.25rem;
    --radius-md:   0.5rem;
    --radius-lg:   0.75rem;
    --radius-xl:   1rem;
    --radius-pill: 999px;

    /* ---- Elevation ------------------------------------------------ */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.40);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.50);
    --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.62);
    --shadow-card: var(--shadow-md);
    --shadow-hero: var(--shadow-lg);
    --shadow-glow: 0 4px 16px var(--accent-glow);

    /* ---- Motion ---------------------------------------------------
       Two easings, three durations, replacing 33 ad-hoc transitions. */
    --ease-out:    cubic-bezier(0.22, 0.8, 0.32, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --dur-fast: 120ms;
    --dur-base: 200ms;
    --dur-slow: 320ms;
    --transition: var(--dur-base) var(--ease-out);

    /* ---- Layout ---------------------------------------------------
       --header-h replaces a 56px magic number repeated in four files. */
    --header-h:    60px;
    --bottomnav-h: 56px;
    --sidebar-w:   232px;
    --rail-w:      244px;
    --content-max: 1240px;
    --feed-max:    640px;
    --reading-max: 68ch;
    --tap-min:     44px;
    --grid-min-width: 220px;

    /* ---- Stacking — named so z-index stops being guesswork -------- */
    --z-base:     1;
    --z-sticky:   100;
    --z-dropdown: 200;
    --z-bottomnav:300;
    --z-overlay:  900;
    --z-modal:    1000;
    --z-toast:    9999;
}

/* Anything that opts into light rendering (print previews, embeds)
   still gets sane native controls. */
@media print {
    :root { color-scheme: light; }
}