/* Kotana Hub — shared design tokens and building blocks (taken from the .dc.html designs). */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
[hidden] { display: none !important; }

:root {
  --linen:#F4F0EB; --ivory:#FBFAF9; --sand:#D9CDBF; --forest:#4B714C; --sage:#9FBC9F; --pine:#2F4B30;
  --clay: oklch(58% 0.085 48); --clay-dark: oklch(42% 0.08 42); --brick: oklch(50% 0.13 28); --brick-light: oklch(93% 0.02 28);
  --gold: oklch(78% 0.11 85); --gold-dark: oklch(45% 0.09 75);
  --bg-page: var(--ivory); --bg-surface-sunken: var(--sand);
  --text-primary: var(--pine); --text-secondary:#5B6E5C; --text-tertiary:#8A9389;
  --border-default: var(--sand); --border-strong:#B9A98F;
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Poppins', -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Roboto Mono', ui-monospace, monospace;
  --text-body-lg: 400 1.125rem/1.55 var(--font-body);
  --text-body: 400 1rem/1.6 var(--font-body);
  --text-body-sm: 500 0.875rem/1.5 var(--font-body);
  --text-caption: 600 0.75rem/1.4 var(--font-body);
  --text-eyebrow: 700 0.75rem/1.2 var(--font-body);
  --text-mono-sm: 500 0.8125rem/1.3 var(--font-mono);
  --tracking-eyebrow:0.12em;
  --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;
  --section-padding-x: var(--space-6); --card-padding: var(--space-5);
  --container-max:1200px; --container-narrow:720px;
  --shadow-sm: 0 2px 8px rgba(47,75,48,0.08);
  --frame: var(--linen); --ink: var(--pine);
  --pastel-sage:  color-mix(in oklch, var(--sage) 38%, white);
  --pastel-sand:  color-mix(in oklch, var(--sand) 45%, white);
  --pastel-gold:  color-mix(in oklch, var(--gold) 32%, white);
  --pastel-clay:  color-mix(in oklch, var(--clay) 20%, white);
  --pastel-forest:color-mix(in oklch, var(--forest) 14%, white);
  --pastel-pine:  color-mix(in oklch, var(--pine) 16%, white);
  --pastel-brick: color-mix(in oklch, var(--brick) 18%, white);
}
@media (max-width: 480px) {
  :root { --section-padding-x: var(--space-4); --card-padding: var(--space-4); }
}

body { margin: 0; background: var(--linen); color: var(--text-primary); font-family: var(--font-body); }
a { color: var(--ink); }
a:hover { color: var(--brick); }
input::placeholder, textarea::placeholder { color: var(--text-tertiary); }
:focus-visible { outline: 3px solid rgba(75,113,76,0.45); outline-offset: 2px; }

/* Building blocks */
.eyebrow { font: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-secondary); }
.frame { border: 10px solid var(--frame); background: var(--ivory); }
.frame--shadow { box-shadow: var(--shadow-sm); }
.req { color: var(--brick); }
.err { font: var(--text-body-sm); color: var(--brick); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  min-height: 48px; padding: var(--space-2) var(--space-6);
  background: var(--ink); color: var(--ivory); border: 0; border-radius: 0;
  font: 700 14px/1.25 var(--font-body); cursor: pointer; text-decoration: none;
}
.btn:hover { color: var(--ivory); filter: brightness(1.12); }
.btn[disabled], .btn[aria-disabled="true"] { cursor: not-allowed; opacity: .4; filter: none; }
.btn--outline { background: transparent; color: var(--ink); border: 2px solid var(--ink); }
.btn--outline:hover { color: var(--ink); background: rgba(47,75,48,.07); filter: none; }
.btn--sand { background: var(--sand); color: var(--ink); }
.btn--sand:hover { color: var(--ink); }
.btn--forest { background: var(--forest); }
.btn--sm { min-height: 40px; padding: 0 14px; font-size: 13px; }

.input {
  width: 100%; min-height: 48px; padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border-default); border-radius: 0; background: var(--ivory);
  font: var(--text-body); color: var(--text-primary);
}
.input:disabled { cursor: not-allowed; }

.notice {
  margin: var(--space-4) auto; max-width: 720px; padding: var(--space-4);
  background: var(--pastel-gold); font: var(--text-body-sm); color: var(--ink);
}

@media print {
  body { background: #fff; }
  .no-print { display: none !important; }
}