/* Superscript Design System — colors + type
   Source of truth: /Dev-Handoff/Colors and /Dev-Handoff/Type-Desktop in the Figma file. */

/* ---------- Fonts ---------- */
@font-face { font-family: "Suisse Intl"; src: url("fonts/SuisseIntl-Thin.ttf") format("truetype"); font-weight: 100; 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-Book.ttf") format("truetype"); font-weight: 350; font-style: normal; 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-RegularItalic.ttf") format("truetype"); font-weight: 400; font-style: italic; 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-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }

@font-face { font-family: "Suisse Intl Mono"; src: url("fonts/SuisseIntlMono-Thin.ttf") format("truetype"); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: "Suisse Intl Mono"; src: url("fonts/SuisseIntlMono-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Suisse Intl Mono"; src: url("fonts/SuisseIntlMono-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* ---------- Brand colors (verbatim from /Dev-Handoff/Colors) ---------- */
  --ss-blue:           #00A3FF; /* Superscript Blue — the signature color */
  --ss-blue-dark:      #0C74B9; /* Superscript Dark Blue */
  --ss-blue-light:     #64C5FD; /* Light Blue (annotations, footer accents) */
  --ss-blue-cyan:      #00C2FF; /* Cyan tint variant */

  --ss-orange:         #FF8B4A;
  --ss-red:            #FF426F;
  --ss-purple:         #AF5EFF;
  --ss-green:          #01CE91;

  /* Neutrals — "Terminal" greyscale */
  --ss-black:          #000000; /* Terminal Black */
  --ss-grey-1:         #333333;
  --ss-grey-2:         #666666;
  --ss-grey-3:         #999999;
  --ss-grey-4:         #CCCCCC;
  --ss-grey-5:         #E1E1E1;
  --ss-grey-6:         #F1F1F1;
  --ss-paper:          #F9F9F9; /* White-paper White — default page bg */
  --ss-white:          #FFFFFF; /* Pure White */

  /* Annotation / dev colors (from Dev-Handoff dashed boxes) */
  --ss-annotate-purple:#8A38F5;
  --ss-annotate-violet:#9747FF;

  /* ---------- Semantic colors ---------- */
  --bg:                var(--ss-paper);
  --bg-elevated:       var(--ss-white);
  --bg-inverse:        var(--ss-black);
  --fg:                var(--ss-black);
  --fg-muted:          var(--ss-grey-2);
  --fg-subtle:         var(--ss-grey-3);
  --fg-on-blue:        var(--ss-white);
  --fg-on-dark:        var(--ss-white);
  --accent:            var(--ss-blue);
  --accent-deep:       var(--ss-blue-dark);
  --accent-soft:       var(--ss-blue-light);
  --border:            var(--ss-black);
  --border-subtle:     var(--ss-grey-5);
  --border-dashed:     var(--ss-blue);

  /* ---------- Type families ---------- */
  --font-sans:  "Suisse Intl", "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono:  "Suisse Intl Mono", "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
  --font-display: var(--font-sans); /* display uses Suisse Intl Regular at very large sizes */

  /* ---------- Type tokens (Figma /Dev-Handoff/Type-Desktop) ---------- */
  /* Suisse Intl, letter-spacing -0.05em on huge display, -0.02em headings, -0.03em mono */
  --h1-size: 110px;   --h1-line: 0.8;   --h1-tracking: -0.05em;  --h1-weight: 400;
  --h2-size: 70px;    --h2-line: 0.85;  --h2-tracking: -0.04em;  --h2-weight: 600;
  --h3-size: 42px;    --h3-line: 1.0;   --h3-tracking: -0.03em;  --h3-weight: 400;
  --h-card-size: 24px;--h-card-line: 1.07; --h-card-tracking: -0.02em; --h-card-weight: 400;

  --body-1-size: 18px; --body-1-line: 1.4;
  --body-2-size: 16px; --body-2-line: 1.4;
  --body-3-size: 14px; --body-3-line: 1.4;

  --mono-size: 12px;   --mono-line: 14px; --mono-tracking: -0.03em;  /* the workhorse caption */
  --mono-sm-size: 10px;--mono-sm-line: 12px;

  /* ---------- Spacing ---------- */
  --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: 100px;

  /* ---------- Radii ---------- */
  --r-sharp: 0;          /* Most cards/blocks are sharp-cornered */
  --r-xs: 2px;
  --r-sm: 5px;
  --r-md: 8px;
  --r-pill: 76px;        /* Buttons */
  --r-circle: 9999px;

  /* ---------- Borders ---------- */
  --bw: 1px;
  --bw-thin: 0.5px;

  /* ---------- Shadows (sparingly used) ---------- */
  --shadow-card: 0 1px 0 0 rgba(0,0,0,0.06), 0 8px 24px -12px rgba(0,0,0,0.15);
  --shadow-pop: 0 12px 40px -12px rgba(0,163,255,0.35);

  /* ---------- Grid ---------- */
  --content-max: 1240px;
  --gutter: 24px;
}

/* ---------- Base / element styles ---------- */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--h1-size);
  line-height: var(--h1-line);
  letter-spacing: var(--h1-tracking);
  font-weight: var(--h1-weight);
  margin: 0;
}
h2, .h2 {
  font-size: var(--h2-size);
  line-height: var(--h2-line);
  letter-spacing: var(--h2-tracking);
  font-weight: var(--h2-weight);
  margin: 0;
}
h3, .h3 {
  font-size: var(--h3-size);
  line-height: var(--h3-line);
  letter-spacing: var(--h3-tracking);
  font-weight: var(--h3-weight);
  margin: 0;
}
.h-card {
  font-size: var(--h-card-size);
  line-height: var(--h-card-line);
  letter-spacing: var(--h-card-tracking);
  font-weight: var(--h-card-weight);
}
.h2-mono, .h3-mono { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: -0.03em; }
.h2-mono { font-size: var(--h2-size); line-height: var(--h2-line); }
.h3-mono { font-size: var(--h3-size); line-height: var(--h3-line); }

p, .body-1 { font-size: var(--body-1-size); line-height: var(--body-1-line); margin: 0; }
.body-2 { font-size: var(--body-2-size); line-height: var(--body-2-line); }
.body-3 { font-size: var(--body-3-size); line-height: var(--body-3-line); }

code, kbd, samp, .mono {
  font-family: var(--font-mono);
  font-size: var(--mono-size);
  line-height: var(--mono-line);
  letter-spacing: var(--mono-tracking);
}
.mono-uc { font-family: var(--font-mono); text-transform: uppercase; font-size: var(--mono-size); letter-spacing: -0.03em; }
.mono-sm { font-family: var(--font-mono); font-size: var(--mono-sm-size); line-height: var(--mono-sm-line); letter-spacing: -0.03em; }

/* Annotation tag — ubiquitous in this brand */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--ss-blue);
  border-top: 1px solid var(--ss-blue-light);
  border-bottom: 1px solid var(--ss-blue-light);
}

/* Button — pill, black on paper, single-weight label */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 64px;
  border-radius: var(--r-pill);
  background: var(--ss-black);
  color: var(--ss-white);
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 1.25;
  border: 1.173px solid var(--ss-black);
  transition: background .15s ease, color .15s ease, transform .12s ease;
  cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--ss-blue); border-color: var(--ss-blue); }
.btn:active { transform: translateY(1px); }
.btn--ghost { background: transparent; color: var(--ss-black); }
.btn--ghost:hover { background: var(--ss-black); color: var(--ss-white); }

/* Cards default to sharp-cornered, single-pixel black border on paper */
.card {
  background: var(--ss-white);
  border: 1px solid var(--ss-black);
  border-radius: var(--r-sharp);
  padding: 18px 20px 27px 20px;
}
.card--blue { background: var(--ss-blue); color: var(--ss-white); border-color: var(--ss-blue); }
.card--paper { background: var(--ss-paper); }

/* Dashed dev annotation borders — used in chrome around pieces */
.annot { border: 1px dashed var(--ss-blue); }
.annot--violet { border: 1px dashed var(--ss-annotate-violet); }