/* =============================================================
   Simply IT — Editorial Design System
   Tokens: Colors & Type
   ============================================================= */

:root {
  /* ---------- PALETTE ---------- */
  --c-bg-light:    #F2EFE9; /* Bone — primary light surface */
  --c-fg-light:    #1C1A17; /* Ink — primary light text */
  --c-bg-dark:     #151412; /* Carbon — primary dark surface */
  --c-fg-dark:     #F2EFE9; /* Bone — primary dark text */
  --c-accent:      #B75C40; /* Terracotta — EDITORIAL accent (italics, ampersands, glyphs) */
  --c-brand:       #FE4C01; /* Simply IT Orange — BRAND mark colour (logo, primary buttons, live UI) */
  --c-brand-soft:  #FF7A3D; /* Brand orange, lifted — hover / highlight */
  --c-muted:       #857F75; /* Taupe — captions, eyebrows, metadata */

  /* ---------- DERIVED ---------- */
  --c-rule-light: rgba(28, 26, 23, .15);
  --c-rule-dark:  rgba(242, 239, 233, .15);
  --c-overlay-shadow: 0 30px 80px rgba(0,0,0,.5);

  /* Currently-active theme aliases (set by body class) */
  --bg: var(--c-bg-light);
  --fg: var(--c-fg-light);

  /* ---------- TYPE FAMILIES ---------- */
  --font-serif: "Cormorant Garamond", "EB Garamond", Georgia, "Times New Roman", serif;
  --font-sans:  "Manrope", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  /* ---------- DISPLAY TYPE (serif) ---------- */
  --type-display-xl-size: clamp(64px, 14vw, 240px);
  --type-display-l-size:  clamp(56px, 9vw, 160px);
  --type-display-m-size:  clamp(40px, 6vw, 110px);
  --type-display-s-size:  clamp(32px, 4vw, 64px);
  --type-display-weight:  400;
  --type-display-tracking: -0.025em;
  --type-display-leading: 0.92;

  /* ---------- LEDE / BODY ---------- */
  --type-lede-size:    clamp(22px, 2.6vw, 40px);
  --type-lede-weight:  300;
  --type-lede-leading: 1.3;

  --type-body-size:    16px;
  --type-body-weight:  300;
  --type-body-leading: 1.55;
  --type-body-color:   var(--c-muted);

  /* ---------- EYEBROW / META / CAPTION ---------- */
  --type-eyebrow-size:    12px;
  --type-eyebrow-tracking: 0.3em;
  --type-eyebrow-weight:  300;
  --type-eyebrow-transform: uppercase;

  --type-caption-size:    11px;
  --type-caption-tracking: 0.2em;
  --type-caption-weight:  300;

  /* ---------- MOTION ---------- */
  --ease-out:    cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,.05,.36,1);
  --ease-quiet:  cubic-bezier(.25,.46,.45,.94);
  --dur-fast:   240ms;
  --dur-med:    600ms;
  --dur-slow:   1000ms;

  /* ---------- SPACING (editorial scale) ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;
  --space-11: 192px;

  /* ---------- RADII ---------- */
  --radius-0: 0px;
  --radius-1: 2px;
  --radius-pill: 999px;
  --radius-arch: 1.2em;            /* used for typographic-collage shapes */
  --radius-container: 300px;       /* the expand container */

  /* ---------- RULES ---------- */
  --rule-hair: 1px;
}

/* =============================================================
   SEMANTIC TYPE — apply directly to elements.
   These are utility classes; the editorial site uses inline
   element styles so it can mix serif/sans/italic mid-sentence.
   ============================================================= */

.h-display-xl {
  font-family: var(--font-serif);
  font-weight: var(--type-display-weight);
  font-size:   var(--type-display-xl-size);
  line-height: var(--type-display-leading);
  letter-spacing: var(--type-display-tracking);
}
.h-display-l {
  font-family: var(--font-serif);
  font-weight: var(--type-display-weight);
  font-size:   var(--type-display-l-size);
  line-height: 0.95;
  letter-spacing: var(--type-display-tracking);
}
.h-display-m {
  font-family: var(--font-serif);
  font-weight: var(--type-display-weight);
  font-size:   var(--type-display-m-size);
  line-height: 1;
  letter-spacing: -0.02em;
}
.h-display-s {
  font-family: var(--font-serif);
  font-weight: var(--type-display-weight);
  font-size:   var(--type-display-s-size);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.t-lede {
  font-family: var(--font-sans);
  font-weight: var(--type-lede-weight);
  font-size:   var(--type-lede-size);
  line-height: var(--type-lede-leading);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.t-body {
  font-family: var(--font-sans);
  font-weight: var(--type-body-weight);
  font-size:   var(--type-body-size);
  line-height: var(--type-body-leading);
  color: var(--c-muted);
}
.t-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--type-eyebrow-weight);
  font-size:   var(--type-eyebrow-size);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: var(--type-eyebrow-transform);
  color: var(--c-muted);
}
.t-caption {
  font-family: var(--font-sans);
  font-weight: var(--type-caption-weight);
  font-size:   var(--type-caption-size);
  letter-spacing: var(--type-caption-tracking);
  text-transform: uppercase;
  color: var(--c-muted);
}

.t-italic   { font-family: var(--font-serif); font-style: italic; }
.t-accent   { color: var(--c-accent); }