/* ================================================================
   Sendcloud Design System — colors & typography
   Sources: Figma "Sendcloud brand elements" brand guidelines page,
            brand.sendcloud.com, uploaded master logos.
   ================================================================ */

/* ---------- Fonts ------------------------------------------------
   Primary:   Aeonik  — brand display + UI typeface. Self-hosted from
              the licensed files the user provided (fonts/).
   Secondary: Source Sans 3 (Source Sans Pro family) — data labels &
              dense captions. CDN-delivered (no file provided).
   Accent:    Caveat — hand-written highlight. Self-hosted.
   ---------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;600;700&display=swap");

/* Aeonik — the brand display + UI typeface (licensed, self-hosted). */
@font-face {
  font-family: "Aeonik";
  src: url("fonts/Aeonik-Regular__1_.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aeonik";
  src: url("fonts/Aeonik-RegularItalic__1_.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Aeonik";
  src: url("fonts/Aeonik-Bold__2_.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aeonik";
  src: url("fonts/Aeonik-BoldItalic__1_.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
/* Medium (500) not provided — browser interpolates between 400/700. */

/* Caveat — handwritten accent (self-hosted). */
@font-face {
  font-family: "Caveat";
  src: url("fonts/Caveat__2_.ttf") format("truetype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Brand / primitive colors ------------------------- */
  /* Core brand blues */
  --sc-deep-blue:        #112857;   /* rgb(17,40,87)  primary text, headings */
  --sc-deep-blue-2:      #0A275A;   /* rgb(10,39,90)  dark backgrounds */
  --sc-midnight:         #112040;   /* rgb(17,32,64)  deepest surface */
  --sc-bright-blue:      #1D97FF;   /* rgb(29,151,255) primary action gradient start */
  --sc-bright-blue-2:    #0D9CFF;   /* rgb(13,156,255) action gradient alt */
  --sc-cyan:             #00D2F7;   /* rgb(0,210,247)  gradient end / highlight */
  --sc-cyan-2:           #00D3F7;   /* rgb(0,211,247)  near-dupe, used in Figma */
  --sc-royal:            #0047BB;   /* rgb(0,71,187)   saturated link/pressed */

  /* Neutrals (cool) */
  --sc-white:            #FFFFFF;
  --sc-off-white:        #FBFBFF;   /* brand guidelines canvas */
  --sc-paper:            #F6F8F9;   /* rgb(246,248,249) */
  --sc-cloud:            #E7EAEE;   /* rgb(231,234,238) card surfaces */
  --sc-steel-300:        #B1C3CD;   /* rgb(177,195,205) divider strong */
  --sc-steel-400:        #A0A9BC;   /* rgb(160,169,188) divider default */
  --sc-steel-500:        #9BB0BB;   /* rgb(155,176,187) muted icon */
  --sc-steel-600:        #889BA3;   /* rgb(136,155,163) */
  --sc-ink-500:          #48484C;   /* rgb(72,72,76) */
  --sc-ink-800:          #252525;   /* rgb(37,37,37) */
  --sc-ink-900:          #090909;   /* rgb(9,9,9) */
  --sc-pure-black:       #000000;

  /* Semantic */
  --sc-success:          #00C23D;   /* green gradient end used in colour frame */
  --sc-success-light:    #88EE75;   /* green gradient start */
  --sc-warning:          #EB622C;   /* rgb(235,98,44)  orange warning accent */
  --sc-danger:           #EE1C25;   /* rgb(238,28,37) */
  --sc-danger-2:         #D40511;   /* rgb(212,5,17)   DHL-style red */
  --sc-danger-3:         #E60000;   /* rgb(230,0,0) */

  /* Dev / placeholder accents (dashed guide borders in Figma) */
  --sc-beta-violet:      #9747FF;   /* rgb(151,71,255) */

  /* Shadows (from the figma brand guidelines frames) */
  --sc-shadow-subtle:    0px 2px 16px 1px rgba(198,198,198,0.20);
  --sc-shadow-card:      0px 4px 44px 0px rgba(107,107,107,0.15);
  --sc-shadow-tile:      0px 3px 30px 0px rgba(17,40,87,0.08);
  --sc-shadow-focus:     0 0 0 4px rgba(13,155,255,0.40);

  /* Signature gradients */
  --sc-grad-primary:     linear-gradient(135deg, var(--sc-bright-blue) 0%, var(--sc-cyan) 100%);
  --sc-grad-primary-v:   linear-gradient(180deg, var(--sc-bright-blue) 0%, var(--sc-cyan) 100%);
  --sc-grad-button:      linear-gradient(180deg, #0D9CFF 0%, #07B9FB 100%);
  --sc-grad-cover:       linear-gradient(135deg, #1D97FF 0%, #00D2F7 100%);
  --sc-grad-success:     linear-gradient(180deg, #88EE75 0%, #00C23D 100%);
  --sc-grad-cyan-wash:   linear-gradient(180deg, #00D3F7 0%, rgba(29,151,255,0) 100%);

  /* ---------- Semantic foreground / background tokens ---------- */
  --fg-1:        var(--sc-deep-blue);      /* primary text */
  --fg-2:        var(--sc-deep-blue-2);    /* secondary (dark) */
  --fg-muted:    var(--sc-steel-600);
  --fg-subtle:   var(--sc-steel-400);
  --fg-on-blue:  var(--sc-white);
  --fg-link:     var(--sc-bright-blue);

  --bg-canvas:   var(--sc-white);
  --bg-paper:    var(--sc-paper);
  --bg-surface:  var(--sc-cloud);
  --bg-inverse:  var(--sc-deep-blue-2);
  --bg-brand:    var(--sc-grad-primary);

  --border-soft: var(--sc-cloud);
  --border:      var(--sc-steel-400);
  --border-strong: var(--sc-steel-300);

  /* ---------- Radii (pulled from component usage) -------------- */
  --radius-xs:  6px;   /* small chips */
  --radius-sm:  10px;  /* cards bottom/small */
  --radius-md:  18px;  /* logo tiles in brand doc */
  --radius-lg:  23px;  /* primary button & cta pills */
  --radius-xl:  26px;  /* feature cards */
  --radius-2xl: 30px;  /* hero cover cards */
  --radius-3xl: 35px;  /* icon tiles (big feature icons) */
  --radius-pill: 999px;

  /* ---------- Typography system -------------------------------- */
  --font-display: "Aeonik", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-body:    "Aeonik", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-data:    "Source Sans 3", "Source Sans Pro", system-ui, sans-serif;
  --font-accent:  "Caveat", cursive;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Sizes — geometric scale rooted in the Figma (48 body title,
     138 hero, 100 guidelines title, 42 lead). Scaled for screen. */
  --fs-hero:      96px;   /* landing / cover (large) */
  --fs-display:   72px;   /* slide titles */
  --fs-h1:        56px;
  --fs-h2:        40px;
  --fs-h3:        28px;
  --fs-h4:        22px;
  --fs-lead:      22px;
  --fs-body:      17px;
  --fs-ui:        15px;
  --fs-small:     13px;
  --fs-micro:     11px;

  --lh-tight:     1.0;
  --lh-snug:      1.1;
  --lh-heading:   1.15;
  --lh-body:      1.45;
  --lh-loose:     1.6;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0em;
  --tracking-wide:   0.04em;
}

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

h1, .sc-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0;
}

h2, .sc-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0;
}

h3, .sc-h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  color: var(--fg-1);
  margin: 0;
}

h4, .sc-h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: var(--lh-heading);
  color: var(--fg-1);
  margin: 0;
}

.sc-hero {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.sc-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}

p, .sc-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  margin: 0;
  text-wrap: pretty;
}

.sc-lead {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-lead);
  line-height: 1.4;
  color: var(--fg-1);
}

.sc-eyebrow {
  font-family: var(--font-data);
  font-weight: 700;
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--sc-bright-blue);
}

.sc-kicker {   /* the handwritten accent, e.g. "accessed here" */
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: 42px;
  color: var(--fg-1);
  transform: rotate(-6deg);
  display: inline-block;
}

.sc-data-label {
  font-family: var(--font-data);
  font-weight: 700;
  font-size: var(--fs-small);
  letter-spacing: 0.02em;
  color: var(--fg-2);
}

.sc-caption, small {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--fg-muted);
  line-height: var(--lh-body);
}

code, kbd, .sc-mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-surface);
  padding: 0.12em 0.4em;
  border-radius: 6px;
}

a {
  color: var(--sc-bright-blue);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
a:hover { color: var(--sc-royal); border-bottom-color: currentColor; }

/* Focus ring — always visible, brand blue */
:focus-visible {
  outline: none;
  box-shadow: var(--sc-shadow-focus);
  border-radius: 6px;
}

/* ---------- Buttons (primary recipe: pill, Aeonik 700/20) -------- */
.sc-btn {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1;
  padding: 16px 36px;
  border-radius: var(--radius-lg);
  border: 2px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  text-decoration: none;
  white-space: nowrap;
}
.sc-btn:active { transform: translateY(1px); }

.sc-btn--primary {
  background: var(--sc-grad-button);
  color: var(--sc-white);
  box-shadow: 0 8px 22px -10px rgba(13,156,255,.55);
}
.sc-btn--primary:hover { filter: brightness(1.06); box-shadow: 0 12px 28px -10px rgba(13,156,255,.7); }

.sc-btn--deep {
  background: var(--sc-deep-blue-2);
  color: var(--sc-white);
}
.sc-btn--deep:hover { background: #0d3578; }

.sc-btn--white {
  background: var(--sc-white);
  color: var(--sc-deep-blue-2);
  box-shadow: 0 6px 20px -12px rgba(17,40,87,.3);
}
.sc-btn--white:hover { background: #f4f8fd; }

.sc-btn--outline {
  background: transparent;
  color: var(--sc-deep-blue-2);
  border-color: var(--sc-deep-blue-2);
}
.sc-btn--outline:hover { background: var(--sc-deep-blue-2); color: var(--sc-white); }

.sc-btn--ghost {
  background: transparent;
  color: var(--sc-deep-blue);
  padding: 12px 18px;
}
.sc-btn--ghost:hover { background: var(--bg-surface); }

.sc-btn--sm { padding: 10px 20px; font-size: 14px; border-radius: 18px; }
.sc-btn--lg { padding: 22px 48px; font-size: 20px; }