/* =============================================================
   Redburn Technology — Core Tokens
   Source of truth for colors, type, spacing, radii, shadows.
   Imported by every preview card and UI artifact.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cal+Sans&family=Work+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
    /* -----------------------------------------------------------
       BRAND PALETTE — from the Colours brand-board (uploads/4.png)
       ----------------------------------------------------------- */
    --rb-red:       #C42021;  /* primary brand red — accent, CTAs, labels */
    --rb-black:     #1E1A1D;  /* ink / near-black — primary text */
    --rb-teal:      #63C7B2;  /* secondary — success, positive signals */
    --rb-blue:      #067BC2;  /* secondary — info, links, charts */
    --rb-lavender:  #E9E6FF;  /* canvas / surface tint — signature bg */
    --rb-white:     #FFFFFF;

    /* -----------------------------------------------------------
       EXTENDED SCALE — derived harmonics for UI work
       Kept sparse on purpose; brand is chromatic, not neutral-heavy.
       ----------------------------------------------------------- */
    --rb-red-600:      #A71A1B;
    --rb-red-500:      #C42021;
    --rb-red-400:      #E03435;
    --rb-red-100:      #F9DCDC;

    --rb-teal-700:     #3E9A86;
    --rb-teal-500:     #63C7B2;
    --rb-teal-100:     #D8F1EA;

    --rb-blue-700:     #055C92;
    --rb-blue-500:     #067BC2;
    --rb-blue-100:     #CFE6F5;

    --rb-ink-900:      #1E1A1D;
    --rb-ink-700:      #3A3438;
    --rb-ink-500:      #6B6367;
    --rb-ink-300:      #A8A2A5;
    --rb-ink-200:      #D1CDCF;
    --rb-ink-100:      #EDEAEC;

    --rb-lav-600:      #B8B2E6;
    --rb-lav-500:      #D4CEF5;
    --rb-lav-300:      #E9E6FF;
    --rb-lav-200:      #F2F0FF;
    --rb-lav-100:      #F8F7FF;

    /* -----------------------------------------------------------
       SEMANTIC TOKENS — prefer these in components
       ----------------------------------------------------------- */
    --bg:              var(--rb-lav-300);     /* page background */
    --bg-alt:          var(--rb-white);       /* raised surfaces / cards */
    --bg-ink:          var(--rb-ink-900);     /* dark surface */
    --bg-accent:       var(--rb-red-500);     /* red accent surface */

    --fg:              var(--rb-ink-900);     /* primary text */
    --fg-muted:        var(--rb-ink-500);     /* secondary text */
    --fg-subtle:       var(--rb-ink-300);     /* captions, meta */
    --fg-inverse:      var(--rb-white);       /* text on dark/red */

    --accent:          var(--rb-red-500);
    --accent-hover:    var(--rb-red-600);
    --accent-subtle:   var(--rb-red-100);

    --info:            var(--rb-blue-500);
    --success:         var(--rb-teal-500);
    --success-deep:    var(--rb-teal-700);

    --border:          var(--rb-ink-900);     /* brand uses hard 1-2px black lines */
    --border-subtle:   var(--rb-ink-200);
    --divider:         var(--rb-lav-500);

    --focus-ring:      var(--rb-blue-500);

    /* -----------------------------------------------------------
       TYPOGRAPHY
       Display: Teko (condensed, geometric, all-caps feel).
       Body:    Work Sans (humanist, neutral, highly legible).
       Mono:    JetBrains Mono (substitute — brand defines no mono).
       ----------------------------------------------------------- */
    --font-display: 'Cal Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
    --font-body:    'Work Sans', 'Inter', system-ui, -apple-system, sans-serif;
    --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    /* Display weights — Cal Sans ships as a single weight */
    --fw-display: 400;
    --fw-display-bold: 400;

    /* Body weights */
    --fw-regular: 400;
    --fw-medium:  500;
    --fw-semibold: 600;
    --fw-bold:    700;

    /* Type scale — display is tight, body is airy */
    --fs-display-xl: 96px;
    --fs-display-lg: 72px;
    --fs-display-md: 56px;
    --fs-display-sm: 40px;
    --fs-h1: 32px;
    --fs-h2: 26px;
    --fs-h3: 21px;
    --fs-h4: 18px;
    --fs-body: 16px;
    --fs-body-sm: 14px;
    --fs-caption: 12px;
    --fs-overline: 11px;

    --lh-display: 0.95;
    --lh-tight:   1.15;
    --lh-body:    1.55;
    --lh-loose:   1.7;

    --ls-display: -0.01em;
    --ls-overline: 0.12em;  /* brand uses heavy tracking on label chips */

    /* -----------------------------------------------------------
       SPACING — 4px base grid
       ----------------------------------------------------------- */
    --sp-0: 0;
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;
    --sp-10: 40px;
    --sp-12: 48px;
    --sp-16: 64px;
    --sp-20: 80px;
    --sp-24: 96px;

    /* -----------------------------------------------------------
       RADII — brand leans rectilinear. Small radii only.
       ----------------------------------------------------------- */
    --radius-none: 0;
    --radius-sm:   2px;
    --radius-md:   4px;
    --radius-lg:   8px;
    --radius-pill: 999px;

    /* -----------------------------------------------------------
       SHADOWS — restrained; brand prefers flat + hard borders
       ----------------------------------------------------------- */
    --shadow-none: none;
    --shadow-sm:   0 1px 2px rgba(30, 26, 29, 0.08);
    --shadow-md:   0 4px 12px rgba(30, 26, 29, 0.10);
    --shadow-lg:   0 12px 32px rgba(30, 26, 29, 0.14);
    /* Signature "offset block" shadow — echoes the red label-chip motif */
    --shadow-block: 6px 6px 0 0 var(--rb-ink-900);
    --shadow-block-red: 6px 6px 0 0 var(--rb-red-500);

    /* -----------------------------------------------------------
       MOTION
       ----------------------------------------------------------- */
    --ease-standard: cubic-bezier(.2, .6, .2, 1);
    --ease-exit:     cubic-bezier(.4, 0, 1, 1);
    --dur-fast:   120ms;
    --dur-med:    200ms;
    --dur-slow:   320ms;
}

/* =============================================================
   SEMANTIC ELEMENT DEFAULTS
   Apply these to raw tags where sensible.
   ============================================================= */

html, body {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4,
.display-xl, .display-lg, .display-md, .display-sm {
    font-family: var(--font-display);
    font-weight: var(--fw-display);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-display);
    margin: 0;
    color: var(--fg);
}

.display-xl { font-size: var(--fs-display-xl); line-height: var(--lh-display); }
.display-lg { font-size: var(--fs-display-lg); line-height: var(--lh-display); }
.display-md { font-size: var(--fs-display-md); line-height: var(--lh-display); }
.display-sm { font-size: var(--fs-display-sm); line-height: var(--lh-display); }

h1, .h1 { font-size: var(--fs-h1); }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); }
h4, .h4 { font-size: var(--fs-h4); }

p, .body {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--fg);
    margin: 0;
}

.body-sm { font-size: var(--fs-body-sm); }
.caption { font-size: var(--fs-caption); color: var(--fg-muted); }

/* Brand signature: red label chip with tracked, uppercase Teko.
   Used on the brand-board section headers. */
.overline,
.label-chip {
    font-family: var(--font-display);
    font-weight: var(--fw-display);
    font-size: var(--fs-overline);
    letter-spacing: var(--ls-overline);
    text-transform: uppercase;
    color: var(--fg);
}

.label-chip {
    display: inline-block;
    background: var(--rb-red-500);
    color: var(--fg-inverse);
    padding: 8px 18px 7px;
    font-size: 14px;
    letter-spacing: 0.14em;
}

code, pre, .mono {
    font-family: var(--font-mono);
    font-size: 0.92em;
}

em, i { font-style: italic; }
strong, b { font-weight: var(--fw-semibold); }

a {
    color: var(--rb-blue-500);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--rb-blue-700); }

hr {
    border: none;
    border-top: 1px solid var(--divider);
    margin: var(--sp-8) 0;
}

::selection {
    background: var(--rb-red-500);
    color: var(--rb-white);
}