/* =========================================================
   PixPax Design System — Colors & Type Foundations
   Studio-editorial × enterprise AI infrastructure
   ========================================================= */

/* ---------- Font imports ----------
   All three families are self-hosted from ./fonts (no render-blocking request to Google Fonts).
   Inter and Geist Mono are the variable files Google serves (latin + latin-ext subsets);
   Special Gothic Expanded One keeps the Google copy as a fallback. ---------- */
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("./fonts/GeistMono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("./fonts/GeistMono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("./fonts/Inter-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("./fonts/Inter-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("./fonts/Inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("./fonts/Inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Special Gothic Expanded One";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/SpecialGothicExpandedOne-latin.woff2") format("woff2"),
       url("https://fonts.gstatic.com/s/specialgothicexpandedone/v2/IurO6Zxk74-YaYk1r3HOet4g75ENmBxUmOK61tA0Iu5QmJF_CBYFvA.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Special Gothic Expanded One";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/SpecialGothicExpandedOne-latin-ext.woff2") format("woff2"),
       url("https://fonts.gstatic.com/s/specialgothicexpandedone/v2/IurO6Zxk74-YaYk1r3HOet4g75ENmBxUmOK61tA0Iu5QlpF_CBYFvM9P.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


:root {
  /* ============================================
     COLORS — base palette
     Warm photographic neutrals + a single signal.
     ============================================ */

  /* Paper (cream) — primary surface; evokes photo paper / studio backdrop */
  --paper:        #FAF8F3;
  --paper-soft:   #F4F1EA;
  --bone:         #E8E3D5;
  --stone:        #D9D4C5;
  --stone-warm:   #C8C1AE;

  /* Ink (warm near-black) */
  --ink:          #111110;
  --ink-soft:     #1E1D1A;
  --char:         #2A2925;
  --char-soft:    #3D3B36;
  --graphite:     #5A574F;
  --mute:         #736F64;   /* 4.7:1 on paper: passes AA for the small mono labels */
  --mist:         #B5B1A4;

  /* Signal — warm vermillion. Used sparingly:
     emphasis marks, scoring meters, links, key data.   */
  --signal:       #E6442B;
  --signal-soft:  #F26B53;
  --signal-deep:  #BC2E18;
  --signal-tint:  #FBE5DF;

  /* Rainbow — proprietary brand gradient + individual accent colours.
     The gradient is for slide edges & "moments" (generating bar,
     score-100, delivered underline). The named stops are used as
     accent colours throughout the system — pick one per section /
     surface for variety. */
  --rb-red:     #E63946;
  --rb-orange:  #F4A24A;
  --rb-yellow:  #F2C84B;
  --rb-green:   #54B86A;
  --rb-blue:    #3D8DE6;
  --rb-purple:  #C73AC9;
  --rb-magenta: #E63884;

  --rainbow: linear-gradient(90deg,
    var(--rb-red)     0%,
    var(--rb-orange) 18%,
    var(--rb-yellow) 32%,
    var(--rb-green)  50%,
    var(--rb-blue)   70%,
    var(--rb-purple) 88%,
    var(--rb-magenta) 100%);

  /* Auxiliary (rare): cool blue for system / data states */
  --azure:        #2B5BD7;
  --azure-tint:   #DDE5FA;

  /* States (semantic, photographic) */
  --ok:           #1F7A4C;
  --ok-tint:      #DDEFE2;
  --warn:         #B86A12;
  --warn-tint:    #F6E6CC;

  /* ============================================
     SEMANTIC SURFACES & TEXT
     ============================================ */
  --bg:           var(--paper);
  --bg-elev:      #FFFFFF;
  --bg-inset:     var(--paper-soft);
  --bg-card:      #FFFFFF;
  --bg-invert:    var(--ink);
  --bg-invert-elev: var(--ink-soft);

  --fg:           var(--ink);
  --fg-1:         var(--ink);          /* headlines / primary */
  --fg-2:         var(--char);         /* body */
  --fg-3:         var(--graphite);     /* secondary text */
  --fg-4:         var(--mute);         /* tertiary, captions */
  --fg-5:         var(--mist);         /* disabled / hairlines */
  --fg-invert:    var(--paper);

  --line:         rgba(17, 17, 16, 0.10);
  --line-strong:  rgba(17, 17, 16, 0.18);
  --line-faint:   rgba(17, 17, 16, 0.06);
  --line-invert:  rgba(250, 248, 243, 0.14);

  --focus:        var(--signal);
  --accent:       var(--signal);

  /* ============================================
     RADII — sparse, deliberate.
     Studios stay editorial: small radii preferred.
     ============================================ */
  --r-0:    0px;
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-pill: 999px;

  /* ============================================
     SHADOWS — soft, paper-on-paper.
     Avoid bluish shadows; use warm cast.
     ============================================ */
  --shadow-0:  none;
  --shadow-1:  0 1px 0 rgba(17,17,16,0.04), 0 1px 2px rgba(17,17,16,0.04);
  --shadow-2:  0 1px 1px rgba(17,17,16,0.04), 0 4px 12px rgba(17,17,16,0.06);
  --shadow-3:  0 2px 4px rgba(17,17,16,0.06), 0 12px 32px rgba(17,17,16,0.10);
  --shadow-4:  0 8px 16px rgba(17,17,16,0.08), 0 24px 60px rgba(17,17,16,0.14);
  --shadow-inset: inset 0 0 0 1px var(--line);

  /* ============================================
     SPACING SCALE (4px base)
     ============================================ */
  --s-0:  0;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  40px;
  --s-9:  48px;
  --s-10: 64px;
  --s-11: 80px;
  --s-12: 120px;
  --s-13: 160px;

  /* ============================================
     TYPOGRAPHY — system
     Display:  Special Gothic Expanded One (uppercase headlines, local woff2)
     UI/Text:  Inter (Google Fonts CDN, 400 / 500 / 600)
     Mono:     Geist Mono (Google Fonts CDN, data / scores / labels)
     ============================================ */
  --font-display: "Special Gothic Expanded One", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, SFMono-Regular, "JetBrains Mono", monospace;

  /* Sizes — editorial scale, generous on the top end. */
  --t-display-xl: clamp(64px, 8.5vw, 160px);
  --t-display-l:  clamp(48px, 6vw, 104px);
  --t-display-m:  clamp(36px, 4.5vw, 72px);
  --t-h1: 56px;
  --t-h2: 40px;
  --t-h3: 28px;
  --t-h4: 22px;
  --t-h5: 18px;
  --t-body-l: 18px;
  --t-body:   16px;
  --t-body-s: 14px;
  --t-caption: 12px;
  --t-micro:   11px;

  /* Tracking */
  --tr-tight:   -0.025em;
  --tr-snug:    -0.015em;
  --tr-normal:   0em;
  --tr-wide:     0.04em;
  --tr-eyebrow:  0.14em;   /* uppercase eyebrows */

  /* Leading */
  --lh-tight:  1.02;
  --lh-snug:   1.12;
  --lh-cozy:   1.25;
  --lh-body:   1.5;
  --lh-loose:  1.7;
}

/* ============================================
   SEMANTIC TYPE CLASSES
   ============================================ */

html, body { background: var(--bg); color: var(--fg); font-family: var(--font-sans); }

.t-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
}

.t-display-xl {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-display-xl);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--fg-1);
  text-transform: uppercase;
}

.t-display-l {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-display-l);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--fg-1);
  text-transform: uppercase;
}

.t-display-m {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-display-m);
  line-height: var(--lh-snug);
  letter-spacing: -0.005em;
  color: var(--fg-1);
  text-transform: uppercase;
}

.t-h1 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--t-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  color: var(--fg-1);
}

.t-h2 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--t-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  color: var(--fg-1);
}

.t-h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--t-h3);
  line-height: var(--lh-cozy);
  letter-spacing: var(--tr-snug);
  color: var(--fg-1);
}

.t-h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--t-h4);
  line-height: var(--lh-cozy);
  color: var(--fg-1);
}

.t-h5 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--t-h5);
  line-height: var(--lh-cozy);
  color: var(--fg-1);
}

.t-body-l {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-body-l);
  line-height: var(--lh-body);
  color: var(--fg-2);
}

.t-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
}

.t-body-s {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-body-s);
  line-height: var(--lh-body);
  color: var(--fg-3);
}

.t-caption {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-caption);
  line-height: var(--lh-cozy);
  color: var(--fg-3);
}

.t-mono {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--t-body-s);
  line-height: var(--lh-cozy);
  color: var(--fg-2);
  letter-spacing: 0;
}

.t-data {
  /* used for stat callouts: 93% / 122 kr / 8 AI-gates */
  font-family: var(--font-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* Italic accent — pull-quote / signature lines (Inter italic, signal coloured) */
.t-italic-accent {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  color: var(--signal);
}

/* Eyebrow with rule (commonly used) */
.t-eyebrow--rule::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  background: currentColor;
  vertical-align: middle;
  margin-right: 10px;
  opacity: 0.6;
}