/* DOCTATE TOKENS
 * The shared design language for the Doctate letter-composition tool.
 * Consulting Room Calm — warm paper, consulting green, sealed gold.
 * Consumed by the Fly app and the Wix marketing site.
 * Tokens only. No component styles.
 */

@import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,300..700&family=Inter+Tight:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ——— Paper & Ink ——— */
  --paper:           #F6F2EA;
  --paper-raised:    #FFFFFF;
  --paper-sunk:      #EFEADF;
  --ink:             #1B1F1D;
  --ink-soft:        #4A524E;
  --ink-faint:       #8A8E89;
  --rule:            #E2DCD0;
  --rule-strong:     #C9C1B1;

  /* ——— Accent (consulting green) ——— */
  --accent:          #1F5A4E;
  --accent-hover:    #174A40;
  --accent-soft:     #E4EEE9;
  --accent-ink:      #0E3029;

  /* ——— Signals ——— */
  --signal-amber:        #A87A2D;
  --signal-amber-soft:   #F5ECD8;
  --signal-crimson:      #8A2A2A;
  --signal-crimson-soft: #F3E2E2;

  /* ——— Seal (premium accent) ——— */
  --seal-gold:       #B8903A;

  /* ——— Type families ——— */
  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body:    "Inter Tight", system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ——— Type scale (fluid) ——— */
  --fs-caption: 0.75rem;
  --fs-small:   0.875rem;
  --fs-body:    0.95rem;
  --fs-lead:    1.0625rem;
  --fs-h4:      1.25rem;
  --fs-h3:      1.5rem;
  --fs-h2:      2rem;
  --fs-h1:      clamp(2.25rem, 3vw + 1rem, 3rem);

  /* ——— Line-heights ——— */
  --lh-body:    1.55;
  --lh-heading: 1.25;
  --lh-mono:    1.4;

  /* ——— Tracking ——— */
  --track-caps:      0.08em;
  --track-wordmark:  0.04em;

  /* ——— Motion ——— */
  --ease:      cubic-bezier(.2, .7, .2, 1);
  --dur-fast:  160ms;
  --dur:       240ms;
  --dur-slow:  320ms;

  /* ——— Elevation ——— */
  --shadow-paper:  0 1px 0 var(--rule);
  --shadow-raised: 0 1px 2px rgba(27,31,29,.04), 0 4px 12px rgba(27,31,29,.06);

  /* ——— Radii ——— */
  --r-sm:   6px;
  --r:      10px;
  --r-lg:   16px;
  --r-pill: 999px;

  /* ——— Spacing (4px baseline) ——— */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;

  /* ——— Layout stops ——— */
  --max-desktop: 1120px;
  --max-laptop:  960px;

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

/* ——— Dark theme (opt-in via [data-theme="dark"]) ——— */
[data-theme="dark"] {
  --paper:           #17181A;
  --paper-raised:    #1F2123;
  --paper-sunk:      #141517;
  --ink:             #F0EAD8;
  --ink-soft:        #B7B0A0;
  --ink-faint:       #7D776B;
  --rule:            #2A2C2E;
  --rule-strong:     #3C3E40;

  --accent:          #3E9987;
  --accent-hover:    #4FB19E;
  --accent-soft:     #1E3832;
  --accent-ink:      #CFE6DE;

  --signal-amber:        #D9A858;
  --signal-amber-soft:   #352C19;
  --signal-crimson:      #C56A6A;
  --signal-crimson-soft: #3A1F1F;

  --seal-gold:       #D4B066;

  --shadow-paper:  0 1px 0 var(--rule);
  --shadow-raised: 0 1px 2px rgba(0,0,0,.3), 0 4px 12px rgba(0,0,0,.4);

  --focus-ring:    0 0 0 3px var(--accent-soft);
}

/* ——— Minimal reset ——— */
*,
*::before,
*::after { box-sizing: border-box; }

html, body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd,
ul, ol { margin: 0; padding: 0; }

ul, ol { list-style: none; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-feature-settings: "tnum";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}