/* ==========================================================================
   Kaizen R/W — Colors & Type
   Paper-and-ink editorial palette. Serif body (Cormorant Garamond),
   sans UI (Inter), handwritten accent (Caveat).
   Used by both the marketing site (krw-website) and the reader app (public).
   ========================================================================== */

/* ----- Self-hosted variable fonts (Latin subset) ----- */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url('./fonts/cormorant-garamond-latin-wght-normal.woff2') format('woff2');
  size-adjust: 105%;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-display: swap;
  font-weight: 300 700;
  src: url('./fonts/cormorant-garamond-latin-wght-italic.woff2') format('woff2');
  size-adjust: 105%;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('./fonts/inter-latin-wght-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url('./fonts/caveat-latin-wght-normal.woff2') format('woff2');
}

/* ==========================================================================
   TOKENS — Light (default)
   ========================================================================== */

:root {
  /* Paper (surfaces — warm off-whites, the manuscript page) */
  --paper:       #f5f2ec; /* base page */
  --paper-warm:  #ede6d9; /* cards, step blocks */
  --paper-deep:  #e4dac8; /* hover of warm surface */

  /* Ink (text, foreground) */
  --ink:         #2c2a26; /* h1/h2/body strong */
  --ink-soft:    #4e473f; /* body */
  --ink-muted:   #6e6355; /* captions, nav */
  --ink-faint:   #9a8e7c; /* eyebrow, meta, dashes */
  --ink-rgb:     44 42 38;
  --hi-rgb:      255 255 255; /* "paper on paper" — cards, rails */

  /* The Red Pen — the single CTA / edit color. Named for the editor’s pen. */
  --red-pen:         #b04040;
  --red-pen-soft:    #c4604f;
  --red-pen-bg:      rgba(176, 64, 64, 0.08);
  --red-pen-bg-hover:rgba(176, 64, 64, 0.12);

  /* Editorial mark categories — muted, paper-friendly. Each one is a kind
     of editorial note. Saturations are low so marks sit ON the page, not
     over it. */
  --mark-repetition: #9c4e28; /* rust — repeat/echo */
  --mark-pacing:     #566a8e; /* slate blue — pacing */
  --mark-style:      #7a5290; /* plum — style/voice */
  --mark-voice:      #6a5a36; /* olive — voice */
  --mark-continuity: #2f6e5e; /* forest — continuity / taught */
  --mark-interiority:#8e4848; /* brick — interiority */
  --mark-taught:     #2f6e5e; /* same as continuity — “learned” dots */

  /* ---- Reader-app aliases ----
     The reader app (public/) uses shorter legacy names in its inline CSS
     (per its CLAUDE.md): --c-repetition, --redpen, --ink-body, --font-editorial.
     These aliases let designs extending the reader-app internals use the
     app's canonical names without redeclaring. New surfaces should prefer
     the --mark-* and --red-pen names above. */
  --c-repetition:    var(--mark-repetition);
  --c-pacing:        var(--mark-pacing);
  --c-style:         var(--mark-style);
  --c-voice:         var(--mark-voice);
  --c-continuity:    var(--mark-continuity);
  --c-interiority:   var(--mark-interiority);
  --c-taught:        var(--mark-taught);
  --redpen:          var(--red-pen);
  --redpen-bg:       var(--red-pen-bg);
  --redpen-bg-hover: var(--red-pen-bg-hover);
  --ink-body:        var(--ink-soft);
  --muted:           var(--ink-muted);

  /* Accent — gold. Used sparingly: selection bg, CTA surface, eyebrow dot. */
  --accent-gold:      #c4a24e;
  --accent-gold-soft: rgba(196, 162, 78, 0.1);
  --cta-ink:          #2c2a26; /* text on gold */

  /* ----- Typography ----- */
  --font-serif:     'Cormorant Garamond', Georgia, 'Iowan Old Style', serif;
  --font-body:      var(--font-serif);        /* chapter text, quotes */
  --font-editorial: var(--font-serif);        /* italic section labels */
  --font-ui:        'Inter', -apple-system, system-ui, sans-serif;
  --font-hand:      'Caveat', 'Segoe Print', cursive; /* very rare: margin note */

  /* ----- Easing ----- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.32, 0.72, 0, 1);

  /* ----- Elevation / shadows (ink-tinted, low-contrast) ----- */
  --shadow-sm: 0 1px 3px rgb(var(--ink-rgb) / 0.03);
  --shadow-md: 0 3px 12px rgb(var(--ink-rgb) / 0.05), 0 1px 3px rgb(var(--ink-rgb) / 0.03);
  --shadow-lg: 0 8px 40px rgb(var(--ink-rgb) / 0.06);
  --shadow-xl: 0 14px 50px rgb(var(--ink-rgb) / 0.1);
  --shadow-cta:0 4px 20px rgb(var(--ink-rgb) / 0.15);

  /* ----- Radii — small & editorial. Nothing ever looks like a pill-shaped app. ----- */
  --radius-xs: 3px;   /* chips */
  --radius-sm: 4px;   /* inputs, buttons */
  --radius-md: 7px;   /* panels */
  --radius-lg: 10px;  /* dialogs */
  --radius-xl: 20px;  /* pricing plans */
  --radius-pill: 999px; /* ONLY gold CTA, theme toggle */

  /* ----- Borders ----- */
  --border-hair:   1px solid rgb(var(--ink-rgb) / 0.06);
  --border-soft:   1px solid rgb(var(--ink-rgb) / 0.1);
  --border-strong: 1px solid rgb(var(--ink-rgb) / 0.15);

  /* ----- Spacing scale (px) ----- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px;
  --s-9: 56px; --s-10: 80px; --s-11: 120px;

  /* ----- Type scale (semantic) ----- */
  --tx-display: clamp(2.4rem, 6.2vw, 4.2rem); /* hero h1 */
  --tx-h1:      clamp(1.8rem, 3.6vw, 2.6rem);
  --tx-h2:      clamp(1.4rem, 2.6vw, 1.9rem);
  --tx-h3:      1.18rem;
  --tx-body:    1rem;
  --tx-ui:      0.9rem;
  --tx-ui-sm:   0.78rem;
  --tx-meta:    0.7rem;    /* eyebrow, caption, hint */
  --tx-micro:   0.55rem;   /* chip, kbd */

  /* ----- Line heights ----- */
  --lh-tight:   1.08;
  --lh-heading: 1.2;
  --lh-body:    1.6;
  --lh-prose:   1.8;   /* reader app chapters */

  /* ----- Tracking ----- */
  --track-eyebrow: 0.14em;   /* uppercase eyebrows */
  --track-label:   0.1em;    /* small caps labels */
  --track-tight:  -0.01em;   /* display serif */

  /* ----- Aliases used by app styles.css ----- */
  --rule:         rgb(var(--ink-rgb) / 0.1);                       /* hairline */
  --font-display: var(--font-serif);                                /* display serif */
  --paper-tinted: oklch(from var(--paper) calc(l - 0.012) c h);     /* hover, original-pane */
}

/* ==========================================================================
   TOKENS — Dark. Preserved from production: near-black warm paper, ink
   becomes ivory. Marks get lighter / more saturated.
   ========================================================================== */

:root.theme-dark,
[data-theme="dark"] {
  --paper:        #1a1614;
  --paper-warm:   #221d1a;
  --paper-deep:   #2a2420;
  --ink:          #f5f2ec;
  --ink-soft:     #d0c8b8;
  --ink-muted:    #b0a595;
  --ink-faint:    #8a7e6e;
  --ink-rgb:      245 242 236;
  --hi-rgb:       40 36 32;

  --red-pen:         #d06050;
  --red-pen-soft:    #e07868;
  --red-pen-bg:      rgba(208, 96, 96, 0.1);
  --red-pen-bg-hover:rgba(208, 96, 96, 0.15);

  --mark-repetition: #eda26e;
  --mark-pacing:     #b0caf0;
  --mark-style:      #d2ace8;
  --mark-voice:      #dcbe9a;
  --mark-continuity: #82dcc4;
  --mark-interiority:#e8a0a0;
  --mark-taught:     #82dcc4;

  /* Reader-app aliases (dark) — see light-mode notes above. */
  --c-repetition:    var(--mark-repetition);
  --c-pacing:        var(--mark-pacing);
  --c-style:         var(--mark-style);
  --c-voice:         var(--mark-voice);
  --c-continuity:    var(--mark-continuity);
  --c-interiority:   var(--mark-interiority);
  --c-taught:        var(--mark-taught);
  --redpen:          var(--red-pen);
  --redpen-bg:       var(--red-pen-bg);
  --redpen-bg-hover: var(--red-pen-bg-hover);
  --ink-body:        var(--ink-soft);
  --muted:           var(--ink-muted);

  --accent-gold:      #d4b462;
  --accent-gold-soft: rgba(212, 180, 98, 0.12);
  --cta-ink:          #1a1614;
}

/* ==========================================================================
   SEMANTIC / ELEMENT DEFAULTS
   Applied to actual tags so a bare HTML fragment styled with
   colors_and_type.css already looks like Kaizen R/W.
   ========================================================================== */

html, body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings — serif, light weight, tight tracking. The brand speaks softly. */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: var(--track-tight);
  line-height: var(--lh-heading);
  text-wrap: balance;
  margin: 0 0 0.4em;
}
h1 { font-size: var(--tx-display); font-weight: 300; line-height: var(--lh-tight); }
h2 { font-size: var(--tx-h1); font-weight: 400; }
h3 { font-size: var(--tx-h2); font-weight: 400; }
h4 { font-size: var(--tx-h3); font-weight: 500; }

/* Italic span in a heading gets the red pen — a brand signature. */
h1 em, h2 em, h3 em {
  font-style: italic;
  font-weight: 400;
  color: var(--red-pen);
}

/* Body copy — serif, comfortable reading measure. */
p {
  font-family: var(--font-body);
  font-size: var(--tx-body);
  color: var(--ink-soft);
  line-height: var(--lh-body);
  text-wrap: pretty;
  margin: 0 0 1em;
  max-width: 65ch;
}

/* Eyebrow — sans, uppercase, muted. */
.eyebrow, small.eyebrow {
  font-family: var(--font-ui);
  font-size: var(--tx-meta);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: var(--ink-muted);
}

/* Caption / UI label — sans, muted. */
.ui-label, figcaption {
  font-family: var(--font-ui);
  font-size: var(--tx-ui-sm);
  color: var(--ink-muted);
}

/* Pull quote — oversized serif italic. */
blockquote, .pull-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  line-height: 1.45;
  color: var(--ink-soft);
  border: 0;
  margin: 1.6em 0;
  max-width: 36em;
}
blockquote em, .pull-quote em { color: var(--red-pen-soft); font-style: italic; }

/* Links — underline on hover, ink color. */
a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 200ms var(--ease);
}
a:hover { color: var(--red-pen); }

/* Code / kbd — small, sans, boxed. */
code, kbd, samp {
  font-family: var(--font-ui);
  font-size: 0.85em;
  font-weight: 500;
  padding: 0.1em 0.35em;
  background: rgb(var(--ink-rgb) / 0.06);
  border-radius: var(--radius-xs);
  color: rgb(var(--ink-rgb) / 0.7);
}

/* Selection — subtle gold wash (brand signature). */
::selection { background: var(--accent-gold-soft); color: var(--ink); }

/* Horizontal rule — hair. */
hr { border: 0; border-top: var(--border-hair); margin: 2em 0; }

/* Reader prose — the app’s chapter text (looser leading, wider measure). */
.prose, .reader-body {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: var(--lh-prose);
  color: var(--ink);
  max-width: 34em;
}
.prose p { margin: 0 0 1.2em; color: var(--ink); }

/* "The Mark" — underline hover, category color. The app’s core primitive:
   a phrase the AI has noted. */
.mark {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: currentColor;
  transition: background 150ms var(--ease);
}
.mark[data-cat="repetition"]  { color: var(--mark-repetition); }
.mark[data-cat="pacing"]      { color: var(--mark-pacing); }
.mark[data-cat="style"]       { color: var(--mark-style); }
.mark[data-cat="voice"]       { color: var(--mark-voice); }
.mark[data-cat="continuity"]  { color: var(--mark-continuity); }
.mark[data-cat="interiority"] { color: var(--mark-interiority); }
.mark[data-cat="author"]      {
  color: var(--ink);
  background: var(--red-pen-bg);
  box-shadow: inset 0 -1.5px 0 var(--red-pen);
  text-decoration: none;
}