/* =============================================================
   Figma Design System — Foundations
   colors_and_type.css

   Single source of truth for color, typography, spacing,
   radius, and elevation tokens. Mirrors the token names in
   DESIGN.md / README.md ({colors.*}, {typography.*}, etc.)

   Font note: figmaSans / figmaMono are proprietary. This file
   substitutes Inter (variable) and JetBrains Mono (variable),
   per the design-system "Note on Font Substitutes". Loaded
   from Google Fonts so the system renders correctly without
   the real font files. Drop in real woff2 files at /fonts/
   to switch sources without touching downstream code.
   ============================================================= */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=JetBrains+Mono:wght@100..800&display=swap");

/* Alias the substituted families to the figmaSans / figmaMono
   names so all downstream CSS keeps referring to the brand
   names. When real font files are dropped into /fonts/, swap
   these src() lines without touching anything else. */
@font-face {
  font-family: "figmaSans";
  src: local("Inter Variable"), local("InterVariable"), local("Inter");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "figmaMono";
  src: local("JetBrains Mono"), local("JetBrainsMono");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* -----------------------------------------------------------
     COLOR — Brand & Accent
     ----------------------------------------------------------- */
  --color-primary:           #000000;       /* {colors.primary} */
  --color-on-primary:        #FFFFFF;       /* {colors.on-primary} */
  --color-accent-magenta:    #E0218A;       /* {colors.accent-magenta} — promo-only */

  /* -----------------------------------------------------------
     COLOR — Surface
     ----------------------------------------------------------- */
  --color-canvas:            #FFFFFF;       /* {colors.canvas} */
  --color-inverse-canvas:    #0A0A0A;       /* {colors.inverse-canvas} */
  --color-surface-soft:      #F5F5F5;       /* {colors.surface-soft} */
  --color-hairline:          #E6E6E6;       /* {colors.hairline} */
  --color-hairline-soft:     #EFEFEF;       /* {colors.hairline-soft} */

  /* Pastel color blocks — the signature surface */
  --color-block-lime:        #D7F26A;       /* {colors.block-lime}  */
  --color-block-lilac:       #C9C5FF;       /* {colors.block-lilac} */
  --color-block-cream:       #F4ECD8;       /* {colors.block-cream} */
  --color-block-mint:        #BDEED4;       /* {colors.block-mint}  */
  --color-block-pink:        #FFCAD4;       /* {colors.block-pink}  */
  --color-block-coral:       #FFA38A;       /* {colors.block-coral} */
  --color-block-navy:        #1E1B4B;       /* {colors.block-navy}  */

  /* -----------------------------------------------------------
     COLOR — Text
     ----------------------------------------------------------- */
  --color-ink:               #000000;       /* {colors.ink} */
  --color-inverse-ink:       #FFFFFF;       /* {colors.inverse-ink} */
  --color-on-inverse-soft:   rgba(255, 255, 255, 0.16); /* {colors.on-inverse-soft} */

  /* -----------------------------------------------------------
     COLOR — Semantic
     ----------------------------------------------------------- */
  --color-success:           #1FAD66;       /* {colors.semantic-success} */
  --color-overlay-scrim:     rgba(0, 0, 0, 0.60); /* {colors.overlay-scrim} */

  /* -----------------------------------------------------------
     TYPOGRAPHY — Families
     ----------------------------------------------------------- */
  --font-sans: "figmaSans", "figmaSans Fallback", "SF Pro Display", system-ui, helvetica, sans-serif;
  --font-mono: "figmaMono", "figmaMono Fallback", "SF Mono", menlo, monospace;

  /* Type rendering — kerning is on everywhere */
  --type-kern: "kern" 1;

  /* -----------------------------------------------------------
     TYPOGRAPHY — Roles (size / weight / line-height / tracking)
     Numbers preserved exactly from the spec.
     ----------------------------------------------------------- */
  /* display-xl */
  --type-display-xl-size:    86px;
  --type-display-xl-weight:  340;
  --type-display-xl-leading: 1.00;
  --type-display-xl-tracking:-1.72px;

  /* display-lg */
  --type-display-lg-size:    64px;
  --type-display-lg-weight:  340;
  --type-display-lg-leading: 1.10;
  --type-display-lg-tracking:-0.96px;

  /* headline */
  --type-headline-size:      26px;
  --type-headline-weight:    540;
  --type-headline-leading:   1.35;
  --type-headline-tracking: -0.26px;

  /* subhead */
  --type-subhead-size:       26px;
  --type-subhead-weight:     340;
  --type-subhead-leading:    1.35;
  --type-subhead-tracking:  -0.26px;

  /* card-title */
  --type-card-title-size:    24px;
  --type-card-title-weight:  700;
  --type-card-title-leading: 1.45;
  --type-card-title-tracking: 0;

  /* body-lg */
  --type-body-lg-size:       20px;
  --type-body-lg-weight:     330;
  --type-body-lg-leading:    1.40;
  --type-body-lg-tracking:  -0.14px;

  /* body */
  --type-body-size:          18px;
  --type-body-weight:        320;
  --type-body-leading:       1.45;
  --type-body-tracking:     -0.26px;

  /* body-sm */
  --type-body-sm-size:       16px;
  --type-body-sm-weight:     330;
  --type-body-sm-leading:    1.45;
  --type-body-sm-tracking:  -0.14px;

  /* link */
  --type-link-size:          20px;
  --type-link-weight:        480;
  --type-link-leading:       1.40;
  --type-link-tracking:     -0.10px;

  /* button */
  --type-button-size:        20px;
  --type-button-weight:      480;
  --type-button-leading:     1.40;
  --type-button-tracking:   -0.10px;

  /* eyebrow (mono, uppercase) */
  --type-eyebrow-size:       18px;
  --type-eyebrow-weight:     400;
  --type-eyebrow-leading:    1.30;
  --type-eyebrow-tracking:   0.54px;

  /* caption (mono, uppercase) */
  --type-caption-size:       12px;
  --type-caption-weight:     400;
  --type-caption-leading:    1.00;
  --type-caption-tracking:   0.60px;

  /* -----------------------------------------------------------
     SPACING — 8px base unit
     ----------------------------------------------------------- */
  --space-hair:    1px;   /* {spacing.hair} */
  --space-xxs:     4px;   /* {spacing.xxs}  */
  --space-xs:      8px;   /* {spacing.xs}   */
  --space-sm:     12px;   /* {spacing.sm}   */
  --space-md:     16px;   /* {spacing.md}   */
  --space-lg:     24px;   /* {spacing.lg}   */
  --space-xl:     32px;   /* {spacing.xl}   */
  --space-xxl:    48px;   /* {spacing.xxl}  */
  --space-section:96px;   /* {spacing.section} */

  /* -----------------------------------------------------------
     RADIUS
     ----------------------------------------------------------- */
  --radius-xs:     2px;     /* {rounded.xs}   */
  --radius-sm:     6px;     /* {rounded.sm}   */
  --radius-md:     8px;     /* {rounded.md}   */
  --radius-lg:    24px;     /* {rounded.lg}   */
  --radius-xl:    32px;     /* {rounded.xl}   */
  --radius-pill:  50px;     /* {rounded.pill} */
  --radius-full:  9999px;   /* {rounded.full} */

  /* -----------------------------------------------------------
     ELEVATION
     ----------------------------------------------------------- */
  --elev-0: none;
  --elev-1: inset 0 0 0 1px var(--color-hairline);
  --elev-2: 0 4px 16px rgba(0, 0, 0, 0.06);
  --elev-3: 0 24px 64px rgba(0, 0, 0, 0.18);

  /* -----------------------------------------------------------
     LAYOUT
     ----------------------------------------------------------- */
  --content-max: 1280px;
  --gutter-desktop: var(--space-xxl);
  --gutter-mobile:  var(--space-lg);
  --nav-height: 56px;
  --marquee-height: 36px;
}

/* =============================================================
   SEMANTIC TYPE STYLES — apply roles by tag or by class.
   Class form (.t-display-xl, .t-eyebrow, …) is the canonical
   way to apply a role; the bare-tag declarations below give
   readable defaults so unstyled HTML doesn't look unbranded.
   ============================================================= */

html, body {
  font-family: var(--font-sans);
  font-feature-settings: var(--type-kern);
  color: var(--color-ink);
  background: var(--color-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

p, li, dd {
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-leading);
  letter-spacing: var(--type-body-tracking);
}

h1 {
  font-size: var(--type-display-xl-size);
  font-weight: var(--type-display-xl-weight);
  line-height: var(--type-display-xl-leading);
  letter-spacing: var(--type-display-xl-tracking);
  margin: 0;
}
h2 {
  font-size: var(--type-display-lg-size);
  font-weight: var(--type-display-lg-weight);
  line-height: var(--type-display-lg-leading);
  letter-spacing: var(--type-display-lg-tracking);
  margin: 0;
}
h3 {
  font-size: var(--type-headline-size);
  font-weight: var(--type-headline-weight);
  line-height: var(--type-headline-leading);
  letter-spacing: var(--type-headline-tracking);
  margin: 0;
}
h4 {
  font-size: var(--type-card-title-size);
  font-weight: var(--type-card-title-weight);
  line-height: var(--type-card-title-leading);
  letter-spacing: var(--type-card-title-tracking);
  margin: 0;
}

a { color: inherit; text-decoration: none; }

/* Role classes — preferred way to apply roles */
.t-display-xl  { font-size: var(--type-display-xl-size);  font-weight: var(--type-display-xl-weight);  line-height: var(--type-display-xl-leading);  letter-spacing: var(--type-display-xl-tracking); }
.t-display-lg  { font-size: var(--type-display-lg-size);  font-weight: var(--type-display-lg-weight);  line-height: var(--type-display-lg-leading);  letter-spacing: var(--type-display-lg-tracking); }
.t-headline    { font-size: var(--type-headline-size);    font-weight: var(--type-headline-weight);    line-height: var(--type-headline-leading);    letter-spacing: var(--type-headline-tracking); }
.t-subhead     { font-size: var(--type-subhead-size);     font-weight: var(--type-subhead-weight);     line-height: var(--type-subhead-leading);     letter-spacing: var(--type-subhead-tracking); }
.t-card-title  { font-size: var(--type-card-title-size);  font-weight: var(--type-card-title-weight);  line-height: var(--type-card-title-leading);  letter-spacing: var(--type-card-title-tracking); }
.t-body-lg     { font-size: var(--type-body-lg-size);     font-weight: var(--type-body-lg-weight);     line-height: var(--type-body-lg-leading);     letter-spacing: var(--type-body-lg-tracking); }
.t-body        { font-size: var(--type-body-size);        font-weight: var(--type-body-weight);        line-height: var(--type-body-leading);        letter-spacing: var(--type-body-tracking); }
.t-body-sm     { font-size: var(--type-body-sm-size);     font-weight: var(--type-body-sm-weight);     line-height: var(--type-body-sm-leading);     letter-spacing: var(--type-body-sm-tracking); }
.t-link        { font-size: var(--type-link-size);        font-weight: var(--type-link-weight);        line-height: var(--type-link-leading);        letter-spacing: var(--type-link-tracking); }
.t-button      { font-size: var(--type-button-size);      font-weight: var(--type-button-weight);      line-height: var(--type-button-leading);      letter-spacing: var(--type-button-tracking); }

.t-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow-size);
  font-weight: var(--type-eyebrow-weight);
  line-height: var(--type-eyebrow-leading);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
}
.t-caption {
  font-family: var(--font-mono);
  font-size: var(--type-caption-size);
  font-weight: var(--type-caption-weight);
  line-height: var(--type-caption-leading);
  letter-spacing: var(--type-caption-tracking);
  text-transform: uppercase;
}