/* ==========================================
   NOTLUCK — COLORS & TYPE TOKENS
   Source: Brand Playbook v3.0 (18 April 2026)
   + notluck-website/src/styles/global.css
   ========================================== */

/* Fonts: Red Hat family — self-hosted variable fonts */
@font-face {
    font-family: 'Red Hat Display';
    src: url('fonts/RedHatDisplay-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 300 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Red Hat Display';
    src: url('fonts/RedHatDisplay-Italic-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 300 900;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Red Hat Text';
    src: url('fonts/RedHatText-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Red Hat Text';
    src: url('fonts/RedHatText-Italic-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 300 700;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Red Hat Mono';
    src: url('fonts/RedHatMono-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Red Hat Mono';
    src: url('fonts/RedHatMono-Italic-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 300 700;
    font-style: italic;
    font-display: swap;
}

:root {
    /* ---------- COLOUR PRIMITIVES ---------- */
    /* Brand */
    --notgold:          #ECD444;  /* primary accent — 10% usage */
    --notgold-dim:      rgba(236, 212, 68, 0.15);

    /* Dark canvas (60% usage) */
    --notblack:         #0a0a0a;  /* primary background */
    --notblack-light:   #141414;  /* alternate section bg */
    --notblack-card:    #1a1a1a;  /* card surfaces */

    /* Type + accents */
    --notwhite:         #ffffff;  /* headings, body on dark — 30% usage */
    --notpink:          #ec4899;  /* inline emphasis, cameo only */
    --notgreen:         #4a9a8a;  /* success states only */
    --text-muted:       #888899;  /* secondary text, mono labels */
    --danger:           #ef4444;  /* product-only destructive */

    /* Glass */
    --glass:            rgba(255, 255, 255, 0.03);
    --glass-border:     rgba(255, 255, 255, 0.08);

    /* ---------- SEMANTIC TOKENS ---------- */
    --bg:               var(--notblack);
    --bg-alt:           var(--notblack-light);
    --surface:          var(--notblack-card);
    --fg:               var(--notwhite);
    --fg-muted:         var(--text-muted);
    --accent:           var(--notgold);
    --accent-ink:       var(--notblack); /* text on gold fill */
    --border:           var(--glass-border);
    --focus-ring:       var(--notgold);

    /* ---------- TYPE FAMILIES ---------- */
    --font-display:     'Red Hat Display', 'Red Hat Display Fallback', system-ui, sans-serif;
    --font-body:        'Red Hat Text', 'Red Hat Text Fallback', system-ui, sans-serif;
    --font-mono:        'Red Hat Mono', ui-monospace, monospace;

    /* ---------- TYPE SCALE ---------- */
    /* Per playbook Nº 03 */
    --fs-hero:          clamp(2.75rem, 6vw, 5rem);     /* H1 Display 900 */
    --fs-section:       clamp(2rem, 4vw, 3.25rem);     /* H2 Display 900 */
    --fs-card:          1.25rem;                        /* Display 700 */
    --fs-body-lg:       1.125rem;                       /* Text 400 */
    --fs-body:          1rem;                           /* Text 400 */
    --fs-small:         0.875rem;
    --fs-mono-label:    0.78rem;                        /* Mono 500 CAPS */
    --fs-mono-kicker:   0.82rem;                        /* Mono 500 gold */

    --lh-hero:          1;
    --lh-section:       1.05;
    --lh-body:          1.6;
    --tracking-tight:   -0.02em;
    --tracking-mono:    0.14em;

    /* ---------- RADII ---------- */
    --r-input:          12px;
    --r-btn:            12px;
    --r-card:           20px;
    --r-pill:           100px;

    /* ---------- SPACING ---------- */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  24px;
    --space-6:  32px;
    --space-7:  48px;
    --space-8:  64px;
    --space-9:  96px;
    --space-10: 140px;

    /* ---------- MOTION ---------- */
    --ease-smooth:      cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce:      cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --dur-fast:         160ms;
    --dur-base:         320ms;
    --dur-slow:         600ms;
}

/* ---------- SEMANTIC ELEMENT STYLES ---------- */
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;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: var(--tracking-tight);
    color: var(--fg);
}
h1 { font-size: var(--fs-hero);    line-height: var(--lh-hero); }
h2 { font-size: var(--fs-section); line-height: var(--lh-section); }
h3 { font-size: 1.75rem; font-weight: 700; letter-spacing: 0; }
h4 { font-size: var(--fs-card);   font-weight: 700; letter-spacing: 0; }

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

code, pre, .mono {
    font-family: var(--font-mono);
    font-weight: 500;
}

/* Editorial kicker — Nº system signature */
.kicker {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: var(--fs-mono-kicker);
    color: var(--notgold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-mono);
}

.label {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: var(--fs-mono-label);
    color: var(--fg-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-mono);
}

/* Inline highlights — the script replacement */
.highlight       { color: var(--notgold); }
.highlight-pink  { color: var(--notpink); }
em.highlight,
.highlight em    { font-style: italic; color: var(--notgold); }

/* Focus */
:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

/* ==========================================
   LIGHT MODE — "Paper"
   Activate by adding class="light" OR data-mode="light"
   to <html>, <body>, or any wrapper.
   Character: quieter, editorial sibling. Print-friendly.
   ========================================== */

.light, [data-mode="light"] {
    /* Paper primitives — BONE, cooler than cream so gold fills pop.
       Warm paper (#F7F4EC) was competing with gold's warmth; bone #F0EDE4
       strips that warmth out. */
    --paper:            #F0EDE4;   /* 60% — primary background */
    --paper-alt:        #E6E3DA;   /* alternate section */
    --paper-card:       #FFFFFF;   /* card surfaces pop off bone */
    --paper-ink:        #1A1914;   /* body text — warmer than pure black */
    --paper-ink-muted:  #5A554A;   /* secondary text */
    --paper-rule:       rgba(26, 25, 20, 0.12);
    --paper-rule-soft:  rgba(26, 25, 20, 0.06);

    /* Gold on light: #ECD444 is SACRED and unchanged. On paper it is used
       for FILLS ONLY (primary CTAs, icon chips, big stat numerals at scale
       where the colour has enough area to read). For TYPE and THIN LINES
       on paper we use ink black — NEVER a fake darker gold. */
    --paper-fill-gold:  var(--notgold);   /* fills only: buttons, chips */
    --paper-fill-ink:   #1A1914;          /* type on gold fills */
    --gold-marker:      rgba(236, 212, 68, 0.55);  /* highlight-marker bar */

    /* Semantic remap — note: --accent is INK on paper, not gold.
       Gold lives as --accent-fill for button/chip backgrounds. */
    --bg:               var(--paper);
    --bg-alt:           var(--paper-alt);
    --surface:          var(--paper-card);
    --fg:               var(--paper-ink);
    --fg-muted:         var(--paper-ink-muted);
    --accent:           var(--paper-ink);       /* TYPE accent is ink */
    --accent-fill:      var(--notgold);         /* FILLS stay brand gold */
    --accent-ink:       var(--paper-fill-ink);  /* text on gold fills */
    --border:           var(--paper-rule);
    --focus-ring:       var(--notgold);

    /* Pink gets quieter on paper too */
    --notpink:          #D63384;

    /* Muted text token used in decks */
    --text-muted:       var(--paper-ink-muted);
}

/* Highlight rule on paper — the "gold word per headline" becomes a marker bar
   behind INK type (not fake-gold type). Same spirit, correct legibility. */
.light .highlight,
[data-mode="light"] .highlight {
    background: linear-gradient(180deg, transparent 58%, var(--gold-marker) 58%, var(--gold-marker) 94%, transparent 94%);
    color: var(--paper-ink);
    padding: 0 0.08em;
}
.light .highlight-marker,
.light mark.marker,
[data-mode="light"] .highlight-marker,
[data-mode="light"] mark.marker {
    background: linear-gradient(180deg, transparent 58%, var(--gold-marker) 58%, var(--gold-marker) 94%, transparent 94%);
    color: var(--paper-ink);
    padding: 0 0.08em;
    font-style: normal;
}

/* Light-mode logo swap hint — content authors put BOTH logos in markup
   with class="logo-dark" / "logo-light" and we show the right one. */
.logo-light { display: none; }
.light .logo-dark,
[data-mode="light"] .logo-dark { display: none; }
.light .logo-light,
[data-mode="light"] .logo-light { display: inline-block; }

/* Remove the heavy glass / backdrop-blur cards in light mode — they read
   as grey smudges on paper. Authors can opt out with .no-light-reset. */
.light .no-glass-in-light,
[data-mode="light"] .no-glass-in-light {
    background: var(--paper-card) !important;
    backdrop-filter: none !important;
    border-color: var(--paper-rule) !important;
}