/* Kerrie Legend Designs — brand tokens for the Grid Widget app.
   Subset of the KLD brand system (colors_and_type.css). Editorial: charcoal on beige,
   Editor's Note display serif, Essential Sans body, hairline rules, gold used sparingly. */

/* ---------- Fonts ---------- */
@font-face { font-family:"Editors Note"; src:url("/fonts/EditorsNote-Light.ttf") format("truetype");    font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:"Editors Note"; src:url("/fonts/EditorsNote-Regular.ttf") format("truetype");  font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Editors Note"; src:url("/fonts/EditorsNote-Italic.ttf") format("truetype");   font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:"Editors Note"; src:url("/fonts/EditorsNote-Medium.ttf") format("truetype");   font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Editors Note"; src:url("/fonts/EditorsNote-Semibold.ttf") format("truetype");font-weight:600; font-style:normal; font-display:swap; }

@font-face { font-family:"Essential Sans"; src:url("/fonts/EssentialSans-Regular.otf") format("opentype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Essential Sans"; src:url("/fonts/EssentialSans-Italic.otf") format("opentype");  font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:"Essential Sans"; src:url("/fonts/EssentialSans-Medium.otf") format("opentype");  font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Essential Sans"; src:url("/fonts/EssentialSans-SemiBold.otf") format("opentype");font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Essential Sans"; src:url("/fonts/EssentialSans-Bold.otf") format("opentype");    font-weight:700; font-style:normal; font-display:swap; }

:root {
  --kld-editorial-beige:#f0ece5;
  --kld-medium-beige:#d3cfc7;
  --kld-kerrie-black:#313343;
  --kld-white:#ffffff;
  --kld-gold:#d9c1a7;
  --kld-gold-deep:#b89878;
  --kld-beige-50:#faf8f4;
  --kld-beige-200:#e4dfd5;
  --kld-ink-500:#6d6f7b;
  --kld-ink-300:#9c9ea6;

  --bg-page:var(--kld-editorial-beige);
  --bg-surface:var(--kld-white);
  --bg-inverse:var(--kld-kerrie-black);
  --bg-muted:var(--kld-beige-200);

  --fg-primary:var(--kld-kerrie-black);
  --fg-secondary:var(--kld-ink-500);
  --fg-muted:var(--kld-ink-300);
  --fg-inverse:var(--kld-editorial-beige);
  --fg-accent:var(--kld-gold-deep);

  --border-hair:rgba(49,51,67,0.12);
  --border-default:rgba(49,51,67,0.20);
  --border-strong:rgba(49,51,67,0.55);

  --font-display:"Editors Note","Cormorant Garamond","Playfair Display",Georgia,serif;
  --font-body:"Essential Sans","Inter",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --tracking-body:0.04em;
  --rule-tracking:0.22em;

  --r-2:4px; --r-3:8px; --r-4:12px; --r-pill:999px;
  --shadow-1:0 1px 2px rgba(49,51,67,0.05),0 2px 8px rgba(49,51,67,0.04);
  --shadow-2:0 4px 16px rgba(49,51,67,0.08);
  --shadow-float:0 12px 40px rgba(49,51,67,0.10);
  --ease-out:cubic-bezier(0.22,1,0.36,1);
  --container-lg:1120px;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

.kld-body {
  font-family:var(--font-body);
  font-weight:400;
  font-size:1rem;
  line-height:1.6;
  letter-spacing:var(--tracking-body);
  color:var(--fg-primary);
  background:var(--bg-page);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a { color:inherit; text-decoration:none; }

/* Type helpers */
.kld-h1 { font-family:var(--font-display); font-weight:400; font-size:clamp(2.5rem,6vw,4.25rem); line-height:1.03; letter-spacing:-0.01em; }
.kld-h2 { font-family:var(--font-display); font-weight:400; font-size:clamp(1.9rem,4vw,2.85rem); line-height:1.08; letter-spacing:-0.005em; }
.kld-h3 { font-family:var(--font-display); font-weight:500; font-size:1.5rem; line-height:1.2; }
.kld-eyebrow { font-family:var(--font-body); font-weight:500; font-size:0.75rem; text-transform:uppercase; letter-spacing:var(--rule-tracking); color:var(--fg-secondary); }
.kld-editorial { font-family:var(--font-display); font-style:italic; font-weight:300; }
.kld-p { font-family:var(--font-body); font-size:1rem; line-height:1.65; letter-spacing:var(--tracking-body); color:var(--fg-primary); }
.kld-small { font-family:var(--font-body); font-size:0.8125rem; line-height:1.5; color:var(--fg-secondary); }
.kld-rule { border:0; border-top:1px solid var(--border-hair); }

/* Buttons (from the KLD button spec) */
.kld-btn { display:inline-block; font-family:var(--font-body); font-size:0.875rem; font-weight:500; padding:13px 26px; border-radius:var(--r-2); cursor:pointer; transition:all .22s var(--ease-out); border:1px solid transparent; letter-spacing:0.01em; text-align:center; }
.kld-btn.primary { background:var(--kld-kerrie-black); color:var(--kld-editorial-beige); }
.kld-btn.primary:hover { background:#23252f; }
.kld-btn.secondary { background:transparent; color:var(--kld-kerrie-black); border-color:var(--border-strong); }
.kld-btn.secondary:hover { background:rgba(49,51,67,0.04); }
.kld-btn.ghost { background:transparent; color:var(--kld-kerrie-black); }
.kld-btn:disabled { opacity:0.5; cursor:default; }
.kld-link-editorial { font-family:var(--font-display); font-style:italic; border-bottom:1px solid var(--fg-primary); padding-bottom:2px; }