/* ============================================================
   Envoy Design System — Tokens
   Colors and typography pulled directly from envoy.com CSS
   and the 2025 Brand Book.

   Usage:
     <link rel="stylesheet" href="colors_and_type.css">
     body { font-family: var(--font-sans); color: var(--fg-1); }
   ============================================================ */

/* -----------------------------
   Fonts — Sofia Pro
   (filed in /fonts, mirrored from envoy.com CDN)
   ----------------------------- */
@font-face {
  font-family: "Sofia Pro";
  src: url("../fonts/sofia-pro-light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sofia Pro";
  src: url("../fonts/sofia-pro-regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sofia Pro";
  src: url("../fonts/sofia-pro-italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Sofia Pro";
  src: url("../fonts/sofia-pro-medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sofia Pro";
  src: url("../fonts/sofia-pro-semibold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sofia Pro";
  src: url("../fonts/sofia-pro-bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sofia Pro";
  src: url("../fonts/sofia-pro-black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ============================================================
     ESSENTIALS — the primary palette Envoy Red, Carbon, Arctic, White
     ============================================================ */
  --envoy-red:       #FA4338;   /* primary brand; buttons + accents  */
  --envoy-red-hover: #E23C32;
  --carbon:          #3F4450;   /* core dark neutral, body text      */
  --arctic:          #F6F6F9;   /* default light background          */
  --white:           #FFFFFF;

  /* ============================================================
     CARBON SCALE — neutrals. Primarily text + backgrounds.
     ============================================================ */
  --carbon-90: #1F232D;
  --carbon-80: #303541;
  --carbon-70: #3F4450;   /* alias of --carbon */
  --carbon-60: #5C6270;
  --carbon-50: #717684;
  --carbon-40: #8A8F9E;
  --carbon-30: #A4A9B6;
  --carbon-20: #C9CBD4;
  --carbon-10: #EBEBF0;
  --carbon-5:  #F6F6F9;   /* alias of --arctic */

  /* ============================================================
     GEM SCALE — blue-purple. Primarily backgrounds and illustrations.
     Gem is the second major brand color alongside Envoy Red.
     ============================================================ */
  --gem-90: #1F1F51;
  --gem-80: #31317C;
  --gem-70: #4141A2;    /* "Gem" essential */
  --gem-60: #4E4EDA;
  --gem-50: #6161FF;
  --gem-40: #7083FF;
  --gem-30: #8FA5FF;
  --gem-20: #BDCDFF;
  --gem-10: #E0E8FF;
  --gem-5:  #F0F4FF;

  /* ============================================================
     SUPPORTING — illustrations and pops. Use sparingly.
     ============================================================ */
  --cilantro-60: #027839;
  --cilantro-40: #21944E;   /* "Cilantro" essential — success */
  --cilantro-20: #96E3A9;
  --powder-60:   #B5DFEB;   /* "Powder" essential */
  --powder-20:   #AAD9E6;
  --powder-10:   #C3EAF2;
  --pistachio-70:#587000;
  --pistachio-30:#B8BE04;
  --pistachio-20:#D3D327;   /* "Pistachio" essential */
  --pistachio-10:#F0F086;
  --garnet-70:   #A00C1F;   /* "Garnet" — error/destructive */
  --smoothie-20: #FFB0C5;   /* "Smoothie" essential */
  --smoothie-10: #FFC5D6;

  /* ============================================================
     SEMANTIC — foreground, background, border, state colors
     Use these in components; they map to the raw tokens above.
     ============================================================ */

  /* Foreground (text) */
  --fg-1: var(--carbon-90);    /* primary text — headlines   */
  --fg-2: var(--carbon-70);    /* body copy                  */
  --fg-3: var(--carbon-60);    /* secondary / meta text      */
  --fg-4: var(--carbon-40);    /* tertiary / placeholder     */
  --fg-inverse: var(--white);
  --fg-accent: var(--envoy-red);
  --fg-link: var(--gem-70);

  /* Background */
  --bg-0: var(--white);
  --bg-1: var(--arctic);       /* page background            */
  --bg-2: var(--carbon-10);    /* subtle panel               */
  --bg-3: var(--carbon-20);    /* raised stripes, dividers   */
  --bg-dark-1: var(--carbon-90);
  --bg-dark-2: var(--carbon-80);
  --bg-brand-dark: var(--gem-80);   /* gem hero backgrounds */
  --bg-brand: var(--gem-50);

  /* Borders + outlines */
  --border-subtle: #E9E9EA;    /* --outline-cards */
  --border:        var(--carbon-10);
  --border-strong: var(--carbon-20);

  /* Status */
  --success: var(--cilantro-40);
  --success-bg: var(--cilantro-20);
  --danger:  var(--garnet-70);
  --danger-solid: var(--envoy-red);
  --warning: var(--pistachio-30);
  --info:    var(--gem-60);

  /* ============================================================
     TYPOGRAPHY
     Primary: Sofia Pro. Fallback stack includes Proxima Nova then system.
     ============================================================ */
  --font-sans: "Sofia Pro", "Proxima Nova", system-ui, -apple-system,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "SF Mono", SFMono-Regular, Menlo, Monaco, Consolas,
               "Liberation Mono", "Courier New", monospace;

  /* Type scale — tuned to envoy.com display copy */
  --text-xs:   0.75rem;    /* 12px — eyebrow, micro label  */
  --text-sm:   0.875rem;   /* 14px — small body             */
  --text-base: 1rem;       /* 16px — body                   */
  --text-md:   1.125rem;   /* 18px — lead / large body      */
  --text-lg:   1.25rem;    /* 20px — subhead                */
  --text-xl:   1.5rem;     /* 24px — h4                     */
  --text-2xl:  2rem;       /* 32px — h3                     */
  --text-3xl:  2.5rem;     /* 40px — h2                     */
  --text-4xl:  3.25rem;    /* 52px — h1                     */
  --text-5xl:  4.5rem;     /* 72px — display                */

  /* Line heights — generous for the warm, human voice */
  --leading-tight:  1.1;
  --leading-snug:   1.25;
  --leading-normal: 1.5;
  --leading-loose:  1.7;

  /* Letter spacing — Sofia Pro is geometric; tighten display sizes */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;

  /* Font weights (what Sofia Pro ships with) */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    900;

  /* ============================================================
     RADII — envoy.com uses 8px for buttons + cards, 12/16px for
     hero panels, 999px reserved for avatars/chips.
     ============================================================ */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ============================================================
     SPACING — 4px base scale
     ============================================================ */
  --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;
  --space-24: 96px;
  --space-32: 128px;

  /* ============================================================
     SHADOWS — soft, neutral. Envoy does not use colored shadows.
     ============================================================ */
  --shadow-xs: 0 1px 2px 0 rgba(31, 35, 45, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(31, 35, 45, 0.06),
               0 1px 2px -1px rgba(31, 35, 45, 0.06);
  --shadow:    0 4px 12px -2px rgba(31, 35, 45, 0.08),
               0 2px 4px -1px rgba(31, 35, 45, 0.04);
  --shadow-md: 0 10px 24px -6px rgba(31, 35, 45, 0.12),
               0 4px 8px -2px rgba(31, 35, 45, 0.06);
  --shadow-lg: 0 20px 40px -12px rgba(31, 35, 45, 0.18),
               0 8px 16px -6px rgba(31, 35, 45, 0.08);

  /* ============================================================
     MOTION — gentle, not bouncy. Envoy hover states are a soft
     0.2–0.3s ease. Card-flips use 0.6s cubic-bezier.
     ============================================================ */
  --ease-out:   cubic-bezier(0.2, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   400ms;
  --duration-flip:   600ms;

  /* ============================================================
     LAYOUT
     ============================================================ */
  --container-max: 1280px;
  --container-narrow: 960px;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Import and apply via classnames (.h1, .body, .eyebrow),
   or set base element defaults with `@layer base`.
   ============================================================ */

.h-display,
.h1 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: clamp(2.25rem, 4vw, var(--text-4xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  text-wrap: balance;
  margin: 0;
}

.h2 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: clamp(1.75rem, 3vw, var(--text-3xl));
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  text-wrap: balance;
  margin: 0;
}

.h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  color: var(--fg-1);
  margin: 0;
}

.h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--fg-1);
  margin: 0;
}

.eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--envoy-red);
  margin: 0;
}

.lead {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--fg-2);
  text-wrap: pretty;
  margin: 0;
}

.body,
.p {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg-2);
  text-wrap: pretty;
  margin: 0;
}

.small,
.caption {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-3);
  margin: 0;
}

.micro {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--fg-3);
  margin: 0;
}

code,
.code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--carbon-10);
  color: var(--carbon-90);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}