/* ============================================================
   Your First Thousand — Circuit/Ember design tokens
   Import this before components.css
   ============================================================ */

:root {
  /* ---- Core palette ---- */
  --yft-ember:        #E8632C;  /* the single accent */
  --yft-ember-hover:  #C94F1F;  /* hover/active; also small Ember text (AA) */
  --yft-ember-tint:   #FBEADF;  /* callout/highlight background */
  --yft-ink:          #101418;  /* primary text, dark fields */
  --yft-slate:        #2E3A45;  /* secondary dark, inverted bands */
  --yft-paper:        #FAFAF7;  /* page background (cool white) */
  --yft-panel:        #F0F2EE;  /* subtle section panels */
  --yft-bone:         #F6F2E9;  /* warm cream — marketing/cover field */

  /* ---- Functional color ---- */
  --yft-text:                var(--yft-ink);
  --yft-text-muted:          #5B6670;
  --yft-text-inverse:        var(--yft-paper);
  --yft-text-inverse-muted:  #B8C0C8;
  --yft-bg:                  var(--yft-paper);
  --yft-surface:             var(--yft-panel);
  --yft-border:              #DCE0DB;
  --yft-border-dark:         rgb(250 250 247 / 14%);
  --yft-surface-dark:        rgb(250 250 247 / 4%);
  --yft-link:                var(--yft-ember-hover);
  --yft-focus-ring:          var(--yft-ember);

  /* ---- Typography ---- */
  --yft-font-display: "Sora", ui-sans-serif, system-ui, sans-serif;
  --yft-font-body:    "Inter", ui-sans-serif, system-ui, sans-serif;
  --yft-font-mono:    "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;
  --yft-font-accent:  "Pirata One", "Grenze Gotisch", serif; /* blackletter — ONE short element, marketing only */

  --yft-weight-body:      400;
  --yft-weight-medium:    500;
  --yft-weight-semibold:  600;
  --yft-weight-heavy:     800;

  --yft-size-display: clamp(3rem, 6vw, 4.5rem);   /* 48–72px */
  --yft-size-h1:      clamp(2.5rem, 4.5vw, 3rem); /* 40–48px */
  --yft-size-h2:      2rem;                        /* 32px */
  --yft-size-h3:      1.5rem;                      /* 24px */
  --yft-size-h4:      1.25rem;                     /* 20px */
  --yft-size-body-lg: 1.25rem;                     /* 20px */
  --yft-size-body:    1.0625rem;                   /* 17px */
  --yft-size-small:   0.875rem;                    /* 14px */
  --yft-size-label:   0.8125rem;                   /* 13px */

  --yft-leading-display: 1.05;
  --yft-leading-heading: 1.15;
  --yft-leading-body:    1.65;

  --yft-tracking-display: -0.02em;
  --yft-tracking-label:    0.16em;

  /* ---- Spacing (4px base) ---- */
  --yft-space-1:  0.25rem;   /*   4 */
  --yft-space-2:  0.5rem;    /*   8 */
  --yft-space-3:  0.75rem;   /*  12 */
  --yft-space-4:  1rem;      /*  16 */
  --yft-space-6:  1.5rem;    /*  24 */
  --yft-space-8:  2rem;      /*  32 */
  --yft-space-12: 3rem;      /*  48 */
  --yft-space-16: 4rem;      /*  64 */
  --yft-space-24: 6rem;      /*  96 */
  --yft-space-32: 8rem;      /* 128 */

  /* ---- Shape & depth ---- */
  --yft-radius-btn:   6px;
  --yft-radius-card:  8px;
  --yft-shadow-whisper: 0 1px 2px rgb(16 20 24 / 6%);

  /* ---- Layout ---- */
  --yft-measure:        68ch;
  --yft-content-max:    1140px;
  --yft-section-pad:    clamp(4rem, 9vw, 8rem);
}