/* ─────────────────────────────────────────────────────────────
   Ciclo Design System — colors & type
   Import once; everything below is in CSS custom properties.
   Fonts (all self-hosted in fonts/):
     - DM Sans (display + body) — Thin → Black + italics
     - DM Mono (eyebrow / labels / numerics) — Light → Medium + italics
   ───────────────────────────────────────────────────────────── */

/* DM Sans — variable font (opsz, wght). Static files (Thin–Black + per-pt
   optical sizes) also live in fonts/ as fallback. */
@font-face {
  font-family: "DM Sans";
  src: url("fonts/DMSans-VariableFont_opsz,wght.ttf") format("truetype-variations"),
       url("fonts/DMSans-VariableFont_opsz,wght.ttf") format("truetype");
  font-weight: 100 1000;
  font-stretch: 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("fonts/DMSans-Italic-VariableFont_opsz,wght.ttf") format("truetype-variations"),
       url("fonts/DMSans-Italic-VariableFont_opsz,wght.ttf") format("truetype");
  font-weight: 100 1000;
  font-stretch: 100%;
  font-style: italic;
  font-display: swap;
}

/* DM Mono — self-hosted */
@font-face {
  font-family: "DM Mono";
  src: url("fonts/DMMono-Light.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "DM Mono";
  src: url("fonts/DMMono-LightItalic.ttf") format("truetype");
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "DM Mono";
  src: url("fonts/DMMono-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "DM Mono";
  src: url("fonts/DMMono-Italic.ttf") format("truetype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "DM Mono";
  src: url("fonts/DMMono-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "DM Mono";
  src: url("fonts/DMMono-MediumItalic.ttf") format("truetype");
  font-weight: 500; font-style: italic; font-display: swap;
}

:root {
  /* ─── Color · base palette ─────────────────────────────── */
  --ink:       #0A0A0A;   /* primary text · dark surface       */
  --paper:     #F9FAFB;   /* primary light surface             */
  --cream:     #EDEAE3;   /* editorial / packaging surface     */
  --cream-2:   #FAF7F2;   /* lighter cream variant             */

  --em:        #059669;   /* brand emerald · the period.       */
  --em-deep:   #065F46;   /* pressed / active emerald          */
  --mint:      #D1FAE5;   /* soft emerald wash · success bg    */

  --gray-50:   #F9FAFB;
  --gray-100:  #F3F4F6;
  --gray-200:  #E5E7EB;
  --gray-300:  #D1D5DB;
  --gray-400:  #9CA3AF;
  --gray-500:  #6B7280;   /* workhorse muted text              */
  --gray-600:  #4B5563;
  --gray-700:  #374151;   /* default body color on light       */
  --gray-800:  #1F2937;
  --gray-900:  #111827;

  /* ─── Color · semantic ─────────────────────────────────── */
  --bg:        var(--paper);
  --bg-alt:    var(--cream);
  --bg-dark:   var(--ink);
  --fg:        var(--ink);
  --fg-muted:  var(--gray-500);
  --fg-body:   var(--gray-700);
  --fg-on-dark: var(--paper);
  --accent:    var(--em);
  --accent-deep: var(--em-deep);
  --accent-soft: var(--mint);
  --border:    var(--gray-200);
  --border-strong: var(--gray-900);

  /* ─── Type · families ──────────────────────────────────── */
  --font-sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ─── Type · scale ─────────────────────────────────────── */
  --fs-mono-xs:   10px;
  --fs-mono-sm:   11px;
  --fs-mono-md:   12px;
  --fs-body-sm:   14px;
  --fs-body:      16px;
  --fs-body-lg:   18px;
  --fs-h4:        20px;
  --fs-h3:        24px;
  --fs-h2:        32px;
  --fs-h1:        40px;
  --fs-display:   56px;
  --fs-display-xl:72px;

  /* ─── Type · letter-spacing ────────────────────────────── */
  --tracking-display: -0.035em;
  --tracking-heading: -0.02em;
  --tracking-body:    0em;
  --tracking-mono:    0.14em;     /* ~1.5–2px on 11px         */
  --tracking-mono-wide:0.20em;

  /* ─── Type · line-height ───────────────────────────────── */
  --lh-display: 1.02;
  --lh-heading: 1.1;
  --lh-body:    1.55;
  --lh-tight:   1.2;
  --lh-mono:    1.0;

  /* ─── Spacing (4px base) ───────────────────────────────── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-6:  24px;
  --s-8:  32px;
  --s-12: 48px;
  --s-16: 64px;
  --s-24: 96px;
  --s-32: 128px;

  /* ─── Radii ────────────────────────────────────────────── */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:  13px;   /* brand-distinctive — the green tile */
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-pill: 999px;

  /* ─── Shadows ──────────────────────────────────────────── */
  --shadow-card: 0 1px 2px rgba(10,10,10,0.04), 0 4px 12px rgba(10,10,10,0.04);
  --shadow-pop:  0 12px 32px rgba(10,10,10,0.10), 0 2px 6px rgba(10,10,10,0.06);

  /* ─── Motion ───────────────────────────────────────────── */
  --ease:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-1:   120ms;
  --dur-2:   200ms;
  --dur-3:   300ms;
}

/* ─── Base ───────────────────────────────────────────────── */
html, body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ─── Semantic typographic roles ─────────────────────────── */
.eyebrow,
.mono-label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--fg-muted);
  line-height: var(--lh-mono);
  font-weight: 400;
}
.eyebrow-wide {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--tracking-mono-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
  line-height: var(--lh-mono);
}

.display,
h1.display {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-display);
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-display);
  color: var(--fg);
  margin: 0;
}
.display-xl {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-display-xl);
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-display);
  margin: 0;
}

h1, .h1 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-h1);
  letter-spacing: var(--tracking-heading);
  line-height: var(--lh-heading);
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-h2);
  letter-spacing: var(--tracking-heading);
  line-height: var(--lh-heading);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-h3);
  letter-spacing: var(--tracking-heading);
  line-height: var(--lh-heading);
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-h4);
  letter-spacing: 0;
  line-height: var(--lh-heading);
  margin: 0;
}

p, .body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-body);
  margin: 0;
}
.body-lg {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--fg-body);
}
.body-sm {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--fg-body);
}

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

.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-md);
  letter-spacing: 0;
  line-height: var(--lh-tight);
}

/* ─── The period rule ─────────────────────────────────────
   Always render the brand period in emerald. Use .ciclo to
   wrap the wordmark in copy.
   ───────────────────────────────────────────────────────── */
.ciclo {
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: var(--tracking-heading);
  color: inherit;
}
.ciclo::after {
  content: ".";
  color: var(--accent);
}
.ciclo-period { color: var(--accent); }

/* When ciclo. is set on the emerald surface the period flips to paper */
.on-em .ciclo::after,
.on-em .ciclo-period { color: var(--paper); }

/* ─── Utility on-surface modifiers ───────────────────────── */
.on-dark { color: var(--fg-on-dark); background: var(--bg-dark); }
.on-em   { color: var(--fg-on-dark); background: var(--accent); }
.on-cream{ color: var(--fg);        background: var(--cream); }
.on-paper{ color: var(--fg);        background: var(--paper); }