/* ========================================================
   Superscript Design System — colors & type
   Source of truth: Figma "Superscript Enterprise Website 2026"
   /System-Pages/Colors + /System-Pages/Type
   ======================================================== */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Suisse Intl";
  src: url("./fonts/SuisseIntl-Ultralight.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Suisse Intl";
  src: url("./fonts/SuisseIntl-Thin.ttf") format("truetype");
  font-weight: 250;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Suisse Intl";
  src: url("./fonts/SuisseIntl-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Suisse Intl";
  src: url("./fonts/SuisseIntl-LightItalic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Suisse Intl";
  src: url("./fonts/SuisseIntl-Book.ttf") format("truetype");
  font-weight: 350;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Suisse Intl";
  src: url("./fonts/SuisseIntl-BookItalic.ttf") format("truetype");
  font-weight: 350;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Suisse Intl";
  src: url("./fonts/SuisseIntl-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Suisse Intl";
  src: url("./fonts/SuisseIntl-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Suisse Intl";
  src: url("./fonts/SuisseIntl-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Suisse Intl";
  src: url("./fonts/SuisseIntl-SemiBoldItalic.ttf") format("truetype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Suisse Intl";
  src: url("./fonts/SuisseIntl-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Suisse Intl";
  src: url("./fonts/SuisseIntl-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Suisse Intl";
  src: url("./fonts/SuisseIntl-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Suisse Intl";
  src: url("./fonts/SuisseIntl-BlackItalic.ttf") format("truetype");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* Mono — only Bold was supplied. Google Fonts fallback is JetBrains Mono (closest
   geometric mono with good hinting + mono ligatures). Flag to user for replacement. */
@font-face {
  font-family: "Suisse Intl Mono";
  src: url("./fonts/SuisseIntlMono-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap");

/* ---------- Tokens ---------- */
:root {
  /* Brand blues — the signature */
  --ss-blue:         #00A3FF;   /* Superscript Blue — primary */
  --ss-blue-dark:    #0089E5;   /* Superscript Dark Blue */
  --ss-blue-light:   #64C5FD;   /* Superscript Light Blue */
  --ss-blue-pale:    #C8E9FE;   /* derived tint */
  --ss-blue-paper:   #E1EFFE;   /* UI-chrome tint (from METADATA) */

  /* Neutrals — "Terminal" grey ramp */
  --ss-black:        #000000;   /* Terminal Black */
  --ss-grey-1:       #333333;
  --ss-grey-2:       #666666;
  --ss-grey-3:       #999999;
  --ss-grey-4:       #CCCCCC;   /* light rule / hairline */
  --ss-grey-5:       #E1E1E1;   /* fills / chips */
  --ss-grey-6:       #F1F1F1;   /* card bg */
  --ss-paper:        #F9F9F9;   /* White-paper White — page bg */
  --ss-white:        #FFFFFF;

  /* Accents — rare, high-signal */
  --ss-orange:       #FF8B4A;
  --ss-red:          #FF426F;   /* cover + alerts */
  --ss-purple:       #AF5EFF;   /* Figma dev-handoff guides */
  --ss-green:        #01CE91;

  /* Semantic foreground/background */
  --fg-1:            var(--ss-black);       /* primary text */
  --fg-2:            var(--ss-grey-1);      /* body default */
  --fg-3:            var(--ss-grey-2);      /* muted */
  --fg-4:            var(--ss-grey-3);      /* disabled / meta */
  --fg-accent:       var(--ss-blue);
  --fg-on-blue:      var(--ss-white);
  --fg-on-black:     var(--ss-white);

  --bg-page:         var(--ss-paper);
  --bg-surface:      var(--ss-white);
  --bg-accent:       var(--ss-blue);
  --bg-dark:         var(--ss-black);
  --bg-muted:        var(--ss-grey-6);

  --border:          var(--ss-black);
  --border-hair:     rgba(0, 0, 0, 0.12);
  --border-accent:   var(--ss-blue);
  --border-dashed:   var(--ss-blue);
  --border-guide:    #9747FF;   /* Figma-style guide purple, used sparingly */

  /* Shadows — brand is almost flat; shadows only on floating UI */
  --shadow-sm:       0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md:       0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg:       0 12px 32px rgba(0, 0, 0, 0.15);

  /* Corner radii — brand is hard-edged. Radius is reserved. */
  --radius-0:        0;
  --radius-pill:     999px;      /* used only on CTA buttons */
  --radius-sm:       2px;
  --radius-md:       5px;        /* used on Figma dev-handoff containers only */

  /* Spacing — 4px grid */
  --space-1:         4px;
  --space-2:         8px;
  --space-3:         12px;
  --space-4:         16px;
  --space-5:         20px;
  --space-6:         24px;
  --space-8:         32px;
  --space-10:        40px;
  --space-12:        48px;
  --space-16:        64px;
  --space-20:        80px;

  /* Type — families */
  --font-display:    "Suisse Intl", "Helvetica Neue", Arial, sans-serif;
  --font-body:       "Suisse Intl", "Helvetica Neue", Arial, sans-serif;
  --font-mono:       "Suisse Intl Mono", "JetBrains Mono", "SFMono-Regular",
                     Menlo, Consolas, monospace;

  /* Type — scale pulled directly from Figma /System-Pages/Type */
  --fs-mega:         120px;   /* hero display            120/80%        */
  --fs-h1:           70px;    /* h1                       70/92%        */
  --fs-h2:           42px;    /* h2                       42/92%        */
  --fs-h2-mono:      32px;    /* h2 mono                  32/107%       */
  --fs-h3:           28px;    /* h3 (book)                28/107%       */
  --fs-pricing:      60px;    /* pricing display          60            */
  --fs-b1:           20px;    /* body 1                   20/125%       */
  --fs-b2:           16px;    /* body 2                   16/125%       */
  --fs-b3:           14px;    /* body 3                   14/125%       */
  --fs-l1:           16px;    /* label 1 (mono)           16            */
  --fs-l2:           12px;    /* label 2 (mono)           12/14         */
  --fs-l3:           10px;    /* label 3 (mono)           10            */
  --fs-caption:      8px;     /* terminal caption (mono)                */

  --tracking-tight:  -0.03em;  /* default on mono labels */
  --tracking-display: -0.02em; /* h1–h3 display */
  --tracking-normal: 0;
}

/* ---------- Base / resets ---------- */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  margin: 0;
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-b2);
  line-height: 1.25;
  text-rendering: optimizeLegibility;
}

/* ---------- Semantic elements ---------- */
h1, .ss-h1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-h1);
  line-height: 0.92;
  letter-spacing: var(--tracking-display);
  margin: 0;
  color: var(--fg-1);
}
h2, .ss-h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 0.92;
  letter-spacing: var(--tracking-display);
  margin: 0;
  color: var(--fg-1);
}
h3, .ss-h3 {
  font-family: var(--font-display);
  font-weight: 350;
  font-size: var(--fs-h3);
  line-height: 1.07;
  letter-spacing: var(--tracking-display);
  margin: 0;
  color: var(--fg-1);
}
.ss-mega {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-mega);
  line-height: 0.8;
  letter-spacing: var(--tracking-display);
}
.ss-pricing {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-pricing);
  line-height: 1;
  letter-spacing: var(--tracking-display);
}
.ss-h2-mono {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-h2-mono);
  line-height: 1.07;
  letter-spacing: var(--tracking-tight);
}

p, .ss-b1, .ss-b2, .ss-b3 {
  font-family: var(--font-body);
  margin: 0;
  color: var(--fg-2);
}
.ss-b1 { font-size: var(--fs-b1); line-height: 1.25; }
.ss-b2 { font-size: var(--fs-b2); line-height: 1.25; }
.ss-b3 { font-size: var(--fs-b3); line-height: 1.25; }

/* Labels — monospace. The brand's "voice of the machine". */
.ss-l1, .ss-l2, .ss-l3, .ss-caption {
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  text-transform: none;
  color: var(--fg-1);
}
.ss-l1 { font-size: var(--fs-l1);  line-height: 1; }
.ss-l2 { font-size: var(--fs-l2);  line-height: 0.89; }
.ss-l3 { font-size: var(--fs-l3);  line-height: 0.89; }
.ss-caption { font-size: var(--fs-caption); line-height: 1; }

code, kbd, samp, .ss-code {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-l2);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-accent);
}

/* ---------- Utilities ---------- */
.ss-blue    { color: var(--ss-blue); }
.ss-black   { color: var(--ss-black); }
.ss-muted   { color: var(--fg-3); }

.ss-bg-paper   { background: var(--bg-page); }
.ss-bg-white   { background: var(--bg-surface); }
.ss-bg-blue    { background: var(--bg-accent); color: var(--fg-on-blue); }
.ss-bg-black   { background: var(--bg-dark);   color: var(--fg-on-black); }

/* Construction / blueprint motifs */
.ss-rule           { border-top: 1px solid var(--ss-black); }
.ss-rule--blue     { border-top: 1px solid var(--ss-blue); }
.ss-rule--dashed   { border-top: 1px dashed var(--ss-blue); }
.ss-rule--guide    { border: 1px dashed var(--border-guide); }

.ss-hairline       { border: 1px solid var(--ss-black); }
.ss-hairline--blue { border: 1px solid var(--ss-blue); }
.ss-hairline--light{ border: 1px solid var(--border-hair); }

/* Blueprint grid background — for hero / section stages */
.ss-grid-bg {
  background-color: var(--bg-page);
  background-image:
    linear-gradient(to right,  rgba(0,163,255,0.12) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,163,255,0.12) 1px, transparent 1px);
  background-size: 120px 120px;
}

/* Pill CTA */
.ss-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 49px;
  padding: 12px 36px;
  border-radius: var(--radius-pill);
  background: var(--ss-black);
  color: var(--ss-white);
  border: 1.2px solid var(--ss-black);
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: 0;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, transform 150ms ease;
  text-decoration: none;
}
.ss-btn:hover   { background: var(--ss-blue); border-color: var(--ss-blue); }
.ss-btn:active  { transform: translateY(1px); }
.ss-btn--ghost  { background: transparent; color: var(--ss-black); }
.ss-btn--ghost:hover { background: var(--ss-black); color: var(--ss-white); }
.ss-btn--blue   { background: var(--ss-blue); border-color: var(--ss-blue); }
.ss-btn--blue:hover { background: var(--ss-blue-dark); border-color: var(--ss-blue-dark); }

/* Crosshair + axis caption (blueprint marker, e.g. "x:264, y:73") */
.ss-crosshair {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--ss-blue);
  box-shadow: 0 0 0 12px var(--bg-page);
}
.ss-axis {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  line-height: 0.89;
  letter-spacing: var(--tracking-tight);
  color: var(--ss-blue-light);
}

/* Selection */
::selection { background: var(--ss-blue); color: var(--ss-white); }