/* ──────────────────────────────────────────────────────────
   DETESO — Colors & Type tokens
   Sourced from /Style-example/Style-examples/index.jsx
   ────────────────────────────────────────────────────────── */

/* ── Brand fonts ─────────────────────────────────────────────────
   Matter Mono TRIAL — display/mono
   Matter TRIAL      — sans (headings + body)
   Files licensed for trial use. Drop production .woff2 files into
   fonts/ when commercial licence is in hand and update the urls.
   ────────────────────────────────────────────────────────────── */
@font-face {
  font-family: "Matter Mono";
  src: url("fonts/MatterMonoTRIAL-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Matter Mono";
  src: url("fonts/MatterMonoTRIAL-Medium.otf") format("opentype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Matter Mono";
  src: url("fonts/MatterMonoTRIAL-SemiBold.otf") format("opentype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Matter Mono";
  src: url("fonts/MatterMonoTRIAL-Bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Matter Mono";
  src: url("fonts/MatterMonoTRIAL-RegularItalic.otf") format("opentype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Matter";
  src: url("fonts/MatterTRIAL-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Matter";
  src: url("fonts/MatterTRIAL-Medium.otf") format("opentype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Matter";
  src: url("fonts/MatterTRIAL-SemiBold.otf") format("opentype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Matter";
  src: url("fonts/MatterTRIAL-Bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Matter";
  src: url("fonts/MatterTRIAL-RegularItalic.otf") format("opentype");
  font-weight: 400; font-style: italic; font-display: swap;
}

:root {
  /* ── Brand palette (Figma `Colours` swatches) ───────────────────── */
  --deteso-blue:        rgb(69, 79, 215);      /* primary brand · #454FD7 */
  --deteso-blue-light:  rgb(127, 135, 237);    /* secondary blue · #7F87ED */
  --deteso-blue-deep:   rgb(20, 74, 181);      /* poster / cover */
  --deteso-charcoal:    rgb(0, 0, 0);          /* "Charcoal" */
  --deteso-pure-white:  rgb(255, 255, 255);    /* "Pure White" */
  --deteso-bone:        rgb(238, 239, 233);    /* off-white · #EEEFE9 */
  --deteso-grey:        rgb(226, 216, 213);    /* warm taupe · #E2D8D5 */
  --deteso-grey-mid:    rgb(175, 174, 179);    /* mid grey · #AFAEB3 */
  --deteso-tan:         rgb(192, 168, 151);    /* warm tan · #C0A897 */
  --deteso-brown:       rgb(86, 51, 45);       /* dark earth · #56332D */
  --deteso-grey-cool:   rgb(228, 233, 234);    /* legacy cool grey */
  --deteso-mute-grey:   rgb(217, 217, 217);    /* placeholder / mute */
  --deteso-orange:      rgb(255, 70, 0);       /* accent */
  --deteso-olive:       rgb(157, 144, 109);    /* warm earth accent */

  /* ── Semantic foreground / background ───────────────────────────── */
  --bg:        var(--deteso-pure-white);
  --bg-alt:    var(--deteso-grey-cool);
  --surface:   var(--deteso-pure-white);
  --fg1:       var(--deteso-charcoal);          /* primary text */
  --fg2:       rgb(60, 60, 60);                 /* secondary text */
  --fg3:       rgb(120, 120, 120);              /* meta text */
  --accent:    var(--deteso-blue);
  --accent-ink:var(--deteso-pure-white);
  --hot:       var(--deteso-orange);
  --line:      rgba(0, 0, 0, 0.12);
  --line-soft: rgba(0, 0, 0, 0.06);

  /* ── Type stacks ─────────────────────────────────────────────────
     Matter Mono → display/hero, code, eyebrows, mono labels
     Matter      → all sans copy (headings + body)
       (Stands in for the Figma file's Scto Grotesk A Bond and Aeonik —
       Matter is the same family Deteso uses for the wordmark and pairs
       cleanly with the mono.)
  */
  --font-mono:    "Matter Mono", "Matter Mono TRIAL", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --font-display: "Matter", "Matter TRIAL", system-ui, sans-serif;
  --font-body:    "Matter", "Matter TRIAL", system-ui, -apple-system, sans-serif;

  /* ── Type scale ──────────────────────────────────────────────────
     Hero numbers reference 158px Matter Mono; large display 60/36px;
     body 13–16px Aeonik. */
  --t-hero:        clamp(96px, 14vw, 158px);
  --t-display:     60px;
  --t-display-sm:  36px;
  --t-h1:          48px;
  --t-h2:          36px;
  --t-h3:          27px;
  --t-h4:          24px;
  --t-body:        16px;
  --t-body-sm:     14px;
  --t-caption:     13px;
  --t-micro:       11px;

  --lh-tight:  1.0;
  --lh-snug:   1.15;
  --lh-body:   1.45;
  --lh-loose:  1.65;

  --tr-tight:  -0.03em;
  --tr-snug:   -0.015em;
  --tr-loose:  0.005em;

  /* ── Spacing (4-px base, doubled at large steps) ────────────────── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* ── Radii (mostly square; small radius for chips) ──────────────── */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-pill: 999px;

  /* ── Elevation — used sparingly, mostly flat ────────────────────── */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-pop: 0 12px 40px rgba(20, 74, 181, 0.18);
}

/* ── Element defaults ────────────────────────────────────────────── */
html, body {
  background: var(--bg);
  color: var(--fg1);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

h1, .h1 {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--t-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg1);
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--t-display-sm);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  color: var(--fg1);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h4);
  line-height: var(--lh-snug);
  margin: 0;
}
p { margin: 0; }
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-caption);
  letter-spacing: 0.06em;
  text-transform: lowercase;
  color: var(--fg2);
}
.mono   { font-family: var(--font-mono); }
.display{ font-family: var(--font-display); font-weight: 700; }
.caption{ font-size: var(--t-caption); color: var(--fg3); }

/* registered ® mark used inline with the wordmark */
.reg { font-feature-settings: "sups" 1; font-size: 0.5em; vertical-align: super; }

/* ── Utility ─────────────────────────────────────────────────────── */
.bg-blue   { background: var(--deteso-blue);     color: var(--deteso-pure-white); }
.bg-deep   { background: var(--deteso-blue-deep);color: var(--deteso-pure-white); }
.bg-orange { background: var(--deteso-orange);   color: var(--deteso-pure-white); }
.bg-olive  { background: var(--deteso-olive);    color: var(--deteso-pure-white); }
.bg-char   { background: var(--deteso-charcoal); color: var(--deteso-pure-white); }
.bg-grey   { background: var(--deteso-grey);     color: var(--deteso-charcoal); }
.bg-cool   { background: var(--deteso-grey-cool);color: var(--deteso-charcoal); }
.bg-white  { background: var(--deteso-pure-white);color: var(--deteso-charcoal); }