/* Manuscribe — compiled design tokens (self-contained for deploy). Generated from tokens/*. */

/* ===== tokens/fonts.css ===== */
/* Manuscribe webfonts — served from Google Fonts CDN.
   Literata = reading/writing serif (Google's literary typeface).
   Public Sans = neutral humanist UI sans.
   JetBrains Mono = metadata / query IDs / timestamps. */
@import url('https://fonts.googleapis.com/css2?family=Literata:ital,opsz,wght@0,7..72,400;0,7..72,500;0,7..72,600;0,7..72,700;1,7..72,400;1,7..72,500&family=Public+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500;600&display=swap');


/* ===== tokens/colors.css ===== */
/* ============================================================
   Manuscribe — Color tokens
   Playful, modern writer's companion.
   Raspberry pink (primary) + teal (secondary) on clean neutrals.
   ============================================================ */
:root {
  /* --- Pink (raspberry) — primary brand --- */
  --pink-50:  #FFF0F7;
  --pink-100: #FFD7EA;
  --pink-200: #FCB4D8;
  --pink-300: #FA7CC9;
  --pink-400: #F24FA6;
  --pink-500: #E23685;
  --pink-600: #CE2E70;   /* primary */
  --pink-700: #A62359;
  --pink-800: #7C1A42;

  /* --- Teal — secondary / success --- */
  --teal-50:  #E2FBF6;
  --teal-100: #BDF3EA;
  --teal-200: #8CE8D9;
  --teal-300: #4FD9C6;
  --teal-400: #22C4B0;
  --teal-500: #12A897;
  --teal-600: #0E8D7E;   /* secondary */
  --teal-700: #0B6D61;

  /* --- Mint — soft support surface --- */
  --mint-50:  #EAFAF3;
  --mint-100: #D5F3E8;

  /* --- Neutrals (ink) — faint mauve-cool grey --- */
  --ink-50:  #FBF8FA;
  --ink-100: #F3EEF1;
  --ink-200: #E7E0E5;
  --ink-300: #D5CCD2;
  --ink-400: #B0A6AD;
  --ink-500: #867E84;
  --ink-600: #665F65;
  --ink-700: #4B454A;
  --ink-800: #302B2F;
  --ink-900: #1B171A;
  --white:   #FFFFFF;
  --paper:   #FFFFFF;

  /* --- Amber — warning / attention --- */
  --amber-50:  #FDF1D9;
  --amber-100: #F8E1AF;
  --amber-500: #EDA92C;
  --amber-600: #CE8E14;
  --amber-700: #9C6B0E;

  /* --- Coral — danger (distinct from pink) --- */
  --coral-50:  #FDEBE9;
  --coral-100: #FBD0CB;
  --coral-500: #EF5350;
  --coral-600: #D93B38;
  --coral-700: #AE2C2A;

  /* --- Blue — informational / links --- */
  --blue-50:  #E8ECFD;
  --blue-500: #5B70F0;
  --blue-600: #4256E0;
  --blue-700: #3444B4;

  /* ==========================================================
     Semantic aliases — reference these in components
     ========================================================== */
  /* Surfaces */
  --bg-page:      var(--ink-50);
  --bg-surface:   var(--paper);
  --bg-subtle:    var(--ink-100);
  --bg-inset:     var(--ink-100);
  --bg-hover:     var(--ink-100);
  --bg-active:    var(--ink-200);
  --bg-inverse:   var(--ink-900);

  /* Text */
  --text-primary:   var(--ink-900);
  --text-secondary: var(--ink-700);
  --text-muted:     var(--ink-500);
  --text-faint:     var(--ink-400);
  --text-inverse:   var(--ink-50);
  --text-on-accent: #FFFFFF;

  /* Borders */
  --border-subtle:  var(--ink-200);
  --border-default: var(--ink-300);
  --border-strong:  var(--ink-400);
  --border-focus:   var(--pink-500);

  /* Accent (primary brand) */
  --accent:         var(--pink-600);
  --accent-hover:   var(--pink-700);
  --accent-active:  var(--pink-800);
  --accent-soft:    var(--pink-50);
  --accent-soft-2:  var(--pink-100);
  --accent-text:    var(--pink-700);
  --accent-border:  var(--pink-200);

  /* Secondary (teal) */
  --secondary:      var(--teal-600);
  --secondary-soft: var(--teal-50);
  --secondary-text: var(--teal-700);

  /* Semantic status */
  --success:       var(--teal-600);
  --success-soft:  var(--teal-50);
  --success-text:  var(--teal-700);
  --warning:       var(--amber-600);
  --warning-soft:  var(--amber-50);
  --warning-text:  var(--amber-700);
  --danger:        var(--coral-600);
  --danger-soft:   var(--coral-50);
  --danger-text:   var(--coral-700);
  --info:          var(--blue-600);
  --info-soft:     var(--blue-50);
  --info-text:     var(--blue-700);

  /* Focus ring */
  --ring: 0 0 0 3px var(--pink-100);

  /* Selection */
  --selection-bg: var(--pink-100);
}

::selection { background: var(--selection-bg); }


/* ===== tokens/typography.css ===== */
/* ============================================================
   Manuscribe — Typography tokens
   Literata (serif) for editorial voice & long-form reading.
   Public Sans for UI. JetBrains Mono for metadata/IDs.
   ============================================================ */
:root {
  --font-display: 'Literata', Georgia, 'Times New Roman', serif;
  --font-serif:   'Literata', Georgia, serif;
  --font-sans:    'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale (rem-ish, expressed in px for clarity) */
  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  38px;
  --text-4xl:  48px;
  --text-5xl:  62px;
  --text-6xl:  80px;

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

  /* Line heights */
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;   /* long-form reading */

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.08em;   /* eyebrows / labels */
}


/* ===== tokens/spacing.css ===== */
/* ============================================================
   Manuscribe — Spacing tokens (4px base grid)
   ============================================================ */
:root {
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   32px;
  --space-8:   40px;
  --space-9:   48px;
  --space-10:  64px;
  --space-11:  80px;
  --space-12:  96px;
  --space-13:  128px;

  /* Layout */
  --container-sm:  640px;
  --container-md:  820px;   /* reading measure */
  --container-lg:  1080px;
  --container-xl:  1280px;
  --gutter:        24px;
}


/* ===== tokens/radius.css ===== */
/* ============================================================
   Manuscribe — Radius & border tokens
   Editorial: moderate rounding, never pill-happy on cards.
   ============================================================ */
:root {
  --radius-xs:   3px;
  --radius-sm:   5px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   18px;
  --radius-2xl:  26px;
  --radius-pill: 999px;

  --border-width:      1px;
  --border-width-thick: 1.5px;
}


/* ===== tokens/shadow.css ===== */
/* ============================================================
   Manuscribe — Shadow / elevation tokens
   Warm-tinted, soft & low — like ink on paper, not glossy SaaS.
   ============================================================ */
:root {
  --shadow-xs: 0 1px 2px rgba(30, 27, 21, 0.06);
  --shadow-sm: 0 1px 3px rgba(30, 27, 21, 0.08), 0 1px 2px rgba(30, 27, 21, 0.04);
  --shadow-md: 0 4px 12px rgba(30, 27, 21, 0.08), 0 1px 3px rgba(30, 27, 21, 0.06);
  --shadow-lg: 0 12px 28px rgba(30, 27, 21, 0.12), 0 4px 8px rgba(30, 27, 21, 0.06);
  --shadow-xl: 0 24px 56px rgba(30, 27, 21, 0.16), 0 8px 16px rgba(30, 27, 21, 0.08);

  /* Focus ring already in colors.css as --ring */
  --shadow-inset: inset 0 1px 2px rgba(30, 27, 21, 0.08);

  /* Accent glow for primary CTAs on dark */
  --shadow-accent: 0 6px 18px rgba(206, 46, 112, 0.30);
}


/* ===== tokens/motion.css ===== */
/* ============================================================
   Manuscribe — Motion tokens
   Calm, editorial. Gentle fades & slides; no bouncy springs.
   ============================================================ */
:root {
  --duration-instant: 80ms;   /* @kind other */
  --duration-fast:    140ms;  /* @kind other */
  --duration-base:    220ms;  /* @kind other */
  --duration-slow:    360ms;  /* @kind other */
  --duration-slower:  560ms;  /* @kind other */

  --ease-standard: cubic-bezier(0.2, 0, 0, 1);      /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);   /* @kind other */
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);      /* @kind other */
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);  /* @kind other */
}


/* ===== tokens/base.css ===== */
/* ============================================================
   Manuscribe — base element defaults.
   Light-touch resets so tokens render consistently.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

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

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  margin: 0;
}

p { margin: 0; text-wrap: pretty; }

a {
  color: var(--accent-text);
  text-decoration: none;
  text-underline-offset: 2px;
  transition: color var(--duration-fast) var(--ease-standard);
}
a:hover { color: var(--accent); text-decoration: underline; }

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

/* Eyebrow / overline label helper */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent-text);
}