/* tokens/colors.css */
/* ============================================================
   TAYYST — Color tokens
   A warm, parchment-grounded palette with a cool accent system:
   a tonal GREEN scale (primary), a deep BLUE/slate scale
   (secondary), and brass as the single warm highlight.
   (The earlier oxblood/rust "warm spectrum" has been retired;
   legacy names are kept as aliases at the bottom for safety.)
   ============================================================ */
:root {
  /* — Base neutrals — warm parchment family — */
  --bone:        #e8e4d9;  /* primary page background (parchment)   */
  --bone-deep:   #e1dccf;  /* slightly deeper parchment             */
  --shell:       #dcd5c5;  /* alternating section background        */
  --sage:        #e7ecd9;  /* green-tinted alt background            */
  --cream:       #f4f0e7;  /* card / raised surface                 */
  --paper:       #fbf9f3;  /* palest raised surface, modals         */
  --line:        #d8d1c2;  /* hairline border                       */
  --line-strong: #c7bfac;  /* emphasised border                     */

  /* — Ink — warm darks — */
  --ink:         #1c1a17;  /* primary text, near-black              */
  --espresso:    #1d2413;  /* dark inverse surface (deep green-black)*/
  --ink-80:      #3a352e;
  --ink-soft:    #6e675c;  /* secondary text                        */
  --ink-faint:   #9a9387;  /* tertiary text, mono labels            */

  /* — GREEN scale — primary accent (forest → sage) — */
  --green-50:   #eef1e3;
  --green-100:  #e2e7cf;
  --green-200:  #c8d1a8;
  --green-300:  #a7b37e;
  --green-400:  #859157;
  --green-500:  #6c7440;
  --green-600:  #535c31;
  --green-700:  #3f4826;   /* primary */
  --green-800:  #2f361d;
  --green-900:  #1f2614;

  /* — BLUE scale — secondary accent (denim → slate) — */
  --blue-50:    #e8edf1;
  --blue-100:   #d4dde6;
  --blue-200:   #adc0cf;
  --blue-300:   #809bb0;
  --blue-400:   #577890;
  --blue-500:   #3c5d75;
  --blue-600:   #2f4a5f;
  --blue-700:   #284052;   /* secondary */
  --blue-800:   #1e313f;
  --blue-900:   #15232d;

  /* — Brass — the single warm highlight — */
  --gold:        #b2913f;
  --gold-deep:   #927424;
  --gold-wash:   #ece4cc;

  /* — Functional — */
  --white:       #ffffff;
  --black:       #000000;
  --overlay:     rgba(28, 26, 23, 0.42);
  --danger:      #9a3a30;  /* error states only — NOT a brand accent */

  /* ============================================================
     Semantic aliases — reference these in components
     ============================================================ */
  --bg:              var(--bone);
  --bg-alt:          var(--shell);
  --bg-sage:         var(--sage);
  --surface:         var(--cream);
  --surface-raised:  var(--paper);
  --surface-inverse: var(--espresso);

  --text:            var(--ink);
  --text-muted:      var(--ink-soft);
  --text-faint:      var(--ink-faint);
  --text-on-dark:    #f1ece1;
  --text-on-accent:  #f3f3ee;

  --border:          var(--line);
  --border-strong:   var(--line-strong);

  --accent:          var(--green-700);   /* primary — green */
  --accent-deep:     var(--green-800);
  --accent-wash:     var(--green-100);
  --accent-2:        var(--blue-700);     /* secondary — blue */
  --accent-2-deep:   var(--blue-800);
  --accent-2-wash:   var(--blue-100);
  --accent-3:        var(--gold);         /* brass highlight */

  --link:            var(--green-700);
  --link-hover:      var(--green-800);
  --focus-ring:      rgba(108, 116, 64, 0.40);

  --success:         var(--green-600);
  --warning:         var(--gold-deep);
  --info:            var(--blue-600);

  /* ============================================================
     Legacy aliases (deprecated) — kept so existing layouts that
     still reference the retired warm-spectrum names keep working.
     oxblood → green (primary), rust → blue (secondary).
     Prefer the semantic --accent / --accent-2 names above.
     ============================================================ */
  --oxblood:      var(--green-700);
  --oxblood-deep: var(--green-800);
  --oxblood-wash: var(--green-100);
  --rust:         var(--blue-700);
  --rust-deep:    var(--blue-800);
  --rust-wash:    var(--blue-100);
  --olive:        var(--green-500);
  --olive-deep:   var(--green-600);
  --olive-wash:   var(--green-50);
}

/* tokens/typography.css */
/* ============================================================
   TAYYST — Typography tokens
   ============================================================ */
:root {
  /* — Families — */
  --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-sans:  'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:  'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* — Type scale (editorial, generous) — */
  --text-7xl: 5.5rem;    /* 88px — hero display      */
  --text-6xl: 4.25rem;   /* 68px — display           */
  --text-5xl: 3.25rem;   /* 52px — page title        */
  --text-4xl: 2.5rem;    /* 40px — section title     */
  --text-3xl: 2rem;      /* 32px — heading           */
  --text-2xl: 1.5rem;    /* 24px — subheading        */
  --text-xl:  1.25rem;   /* 20px — lead              */
  --text-lg:  1.125rem;  /* 18px — large body        */
  --text-base:1rem;      /* 16px — body              */
  --text-sm:  0.875rem;  /* 14px — small             */
  --text-xs:  0.75rem;   /* 12px — caption           */
  --text-2xs: 0.6875rem; /* 11px — mono micro-label  */

  /* — Line heights — */
  --leading-none:    1;
  --leading-tight:   1.06;
  --leading-snug:    1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* — Letter spacing — */
  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.015em;
  --tracking-normal:  0;
  --tracking-wide:    0.06em;
  --tracking-wider:   0.16em;   /* mono eyebrows           */
  --tracking-widest:  0.26em;   /* spaced display labels   */

  /* — Weights — */
  --weight-light:     300;
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;

  /* — Measure — */
  --measure: 64ch;
  --measure-narrow: 46ch;
}

/* tokens/spacing.css */
/* ============================================================
   TAYYST — Spacing, radii, shadows, layout
   8pt-based scale with a few editorial half-steps.
   ============================================================ */
:root {
  /* — Spacing scale — */
  --space-0:  0;
  --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: 168px;

  /* — Corner radii — soft, editorial — */
  --radius-none: 0;
  --radius-xs:   3px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;   /* cards (matches contact-sheet tiles) */
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* — Borders — */
  --border-hair: 1px;
  --border-thick: 1.5px;

  /* — Shadows — restrained, warm-tinted — */
  --shadow-xs: 0 1px 2px rgba(28, 26, 23, 0.05);
  --shadow-sm: 0 1px 2px rgba(28, 26, 23, 0.05), 0 2px 6px rgba(28, 26, 23, 0.04);
  --shadow-md: 0 2px 6px rgba(28, 26, 23, 0.05), 0 10px 28px rgba(28, 26, 23, 0.06);
  --shadow-lg: 0 4px 12px rgba(28, 26, 23, 0.06), 0 22px 60px rgba(28, 26, 23, 0.10);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.5);

  /* — Focus ring — */
  --ring: 0 0 0 3px var(--focus-ring);

  /* — Layout — */
  --container:       1200px;
  --container-wide:  1400px;
  --container-text:  720px;
  --gutter:          var(--space-5);

  /* — Motion — */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);   /* @kind other */
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);   /* @kind other */
  --dur-fast:   120ms;   /* @kind other */
  --dur-base:   200ms;   /* @kind other */
  --dur-slow:   360ms;   /* @kind other */
}

/* tokens/base.css */
/* ============================================================
   TAYYST — Base layer
   Light, opinionated defaults + a few editorial helpers.
   Everything references the design tokens.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-weight: var(--weight-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--oxblood); color: var(--text-on-accent); }

/* — Headings: editorial serif — */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: var(--weight-regular);
  color: var(--text);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin: 0 0 0.4em;
  text-wrap: balance;
}
h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }

p { margin: 0 0 1em; max-width: var(--measure); text-wrap: pretty; }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--link-hover); }

hr { border: none; border-top: var(--border-hair) solid var(--border); margin: var(--space-6) 0; }

strong { font-weight: var(--weight-semibold); }
em { font-style: italic; }

small { font-size: var(--text-sm); }

code, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; }

img { max-width: 100%; display: block; }

/* ============================================================
   Editorial helpers
   ============================================================ */

/* Mono eyebrow / kicker label */
.t-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-faint);
}

/* Display serif */
.t-display {
  font-family: var(--font-serif);
  font-size: var(--text-7xl);
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-tighter);
  line-height: var(--leading-none);
}

.t-serif { font-family: var(--font-serif); }
.t-mono  { font-family: var(--font-mono); }
.t-italic{ font-style: italic; }

/* Lead paragraph */
.t-lead {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
  font-weight: var(--weight-regular);
}

/* Thin top hairline + mono label, contact-sheet style */
.t-section-rule {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  border-top: var(--border-hair) solid var(--border-strong);
  padding-top: var(--space-3);
}

/* components/core/components.css */
/* ============================================================
   TAYYST — Component styles
   Class-based styles for the React primitives in components/core.
   Imported by the root styles.css so consumers get them with the
   tokens. All values reference design tokens.
   ============================================================ */

/* ---------- Button ---------- */
.tay-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  letter-spacing: 0.01em;
  line-height: 1;
  padding: 0 var(--space-5);
  height: 42px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: var(--accent);
  color: var(--text-on-accent);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.tay-btn:hover { background: var(--accent-deep); }
.tay-btn:active { transform: translateY(1px); }
.tay-btn:focus-visible { outline: none; box-shadow: var(--ring); }
.tay-btn[disabled], .tay-btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
.tay-btn svg { width: 16px; height: 16px; flex: none; }

/* variants */
.tay-btn--secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.tay-btn--secondary:hover { background: var(--ink); color: var(--text-on-dark); }
.tay-btn--ghost { background: transparent; color: var(--ink); border-color: transparent; }
.tay-btn--ghost:hover { background: rgba(28,26,23,0.06); }
.tay-btn--accent { background: var(--accent-2); color: var(--text-on-accent); }
.tay-btn--accent:hover { background: var(--accent-2-deep); }

/* on dark surfaces */
.tay-btn--on-dark.tay-btn--secondary { color: var(--text-on-dark); border-color: rgba(241,236,225,0.5); }
.tay-btn--on-dark.tay-btn--secondary:hover { background: var(--text-on-dark); color: var(--ink); }
.tay-btn--on-dark.tay-btn--ghost { color: var(--text-on-dark); }
.tay-btn--on-dark.tay-btn--ghost:hover { background: rgba(241,236,225,0.12); }

/* sizes */
.tay-btn--sm { height: 34px; font-size: var(--text-xs); padding: 0 var(--space-4); }
.tay-btn--lg { height: 50px; font-size: var(--text-base); padding: 0 var(--space-6); }
.tay-btn--pill { border-radius: var(--radius-pill); }
.tay-btn--block { display: flex; width: 100%; }

/* ---------- Eyebrow ---------- */
.tay-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-faint);
}
.tay-eyebrow__mark { color: var(--accent-2); }
.tay-eyebrow--accent { color: var(--accent); }

/* ---------- Tag ---------- */
.tay-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  background: var(--shell);
  color: var(--ink-80);
  border: 1px solid transparent;
}
.tay-tag--green   { background: var(--green-100); color: var(--green-700); }
.tay-tag--blue    { background: var(--blue-100);  color: var(--blue-700); }
.tay-tag--gold    { background: var(--gold-wash);  color: var(--gold-deep); }
.tay-tag--olive   { background: var(--green-50);   color: var(--green-600); }
.tay-tag--outline { background: transparent; border-color: var(--border-strong); color: var(--text-muted); }
/* legacy tone aliases */
.tay-tag--oxblood { background: var(--green-100); color: var(--green-700); }
.tay-tag--rust    { background: var(--blue-100);  color: var(--blue-700); }

/* ---------- Badge (status dot) ---------- */
.tay-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.tay-badge__dot { width: 7px; height: 7px; border-radius: var(--radius-pill); background: var(--ink-faint); flex: none; }
.tay-badge--active  .tay-badge__dot { background: var(--green-500); }
.tay-badge--warning .tay-badge__dot { background: var(--gold); }
.tay-badge--alert   .tay-badge__dot { background: var(--accent-2); }

/* ---------- Card ---------- */
.tay-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.tay-card--paper { background: var(--surface-raised); }
.tay-card--flat { box-shadow: none; }
.tay-card--interactive { cursor: pointer; }
.tay-card--interactive:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--line-strong); }
.tay-card__title { font-family: var(--font-serif); font-size: var(--text-2xl); margin: var(--space-3) 0 var(--space-2); letter-spacing: var(--tracking-tight); }
.tay-card__body { color: var(--text-muted); margin: 0; }

/* ---------- Field / Input ---------- */
.tay-field { display: flex; flex-direction: column; gap: var(--space-2); }
.tay-field__label { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); }
.tay-input {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  width: 100%;
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.tay-input::placeholder { color: var(--ink-faint); }
.tay-input:hover { border-color: var(--ink-faint); }
.tay-input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
textarea.tay-input { resize: vertical; min-height: 96px; line-height: var(--leading-normal); }
.tay-field__hint { font-size: var(--text-xs); color: var(--text-muted); }
.tay-field--error .tay-input { border-color: var(--danger); }
.tay-field--error .tay-field__hint { color: var(--danger); }

/* ---------- Quote / Pullquote ---------- */
.tay-quote { margin: 0; padding-left: var(--space-5); border-left: 2px solid var(--accent); }
.tay-quote__text { font-family: var(--font-serif); font-style: italic; font-size: var(--text-3xl); line-height: 1.32; letter-spacing: -0.01em; color: var(--ink); margin: 0; }
.tay-quote__cite { display: block; margin-top: var(--space-4); font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); font-style: normal; }