/* Plotfy Design System — all tokens, consolidated.
   Paste into any project, or @import the originals from the bound design system.
   Scopes: :root (Paper/day) · .dusk (app + marketing dark). */

/* ===== tokens/colors.css ===== */
/* ============================================================
   PLOTFY · COLOR SYSTEM
   "a person writing quietly at a desk — incense, hot coffee,
    the warm glow of a single lamp against the dark."
   ============================================================ */

:root {
    /* ---- EMBER — the lamp glow / brand accent (amber-gold) ---- */
    --ember-50: #fbf1dd;
    --ember-100: #f6e0b8;
    --ember-200: #edc079;
    --ember-300: #e3a948;
    --ember-400: #d4942a; /* the glow */
    --ember-500: #c8821f; /* core brand amber */
    --ember-600: #a8650f;
    --ember-700: #854f0c;
    --ember-800: #5e370a;
    /* ---- INK — warm near-black, the noir dark ---- */
    --ink-950: #0b0807;
    --ink-900: #120d09;
    --ink-800: #1c140d;
    --ink-700: #281d13;
    --ink-600: #3a2a1c;
    --ink-500: #4d3a28;
    /* ---- PARCHMENT — warm paper, the writing surface ---- */
    --parchment-50: #faf6ef;
    --parchment-100: #f4ecdd;
    --parchment-200: #ecdfc9;
    --parchment-300: #dcc9a9;
    --parchment-400: #c4ab82;
    /* ---- SMOKE — warm taupe neutrals (incense smoke) ---- */
    --smoke-300: #b3a594;
    --smoke-400: #8c7d6b;
    --smoke-500: #6b5d4d;
    --smoke-600: #4f4334;
    --smoke-700: #382e22;
    /* ---- BRASS — secondary metallic (the lamp arm) ---- */
    --brass-400: #c69a55;
    --brass-500: #b8893f;
    /* ---- STATUS — muted, warm-leaning ---- */
    --sage: #6f8c5a; /* success */
    --sage-bg: #e9eede;
    --oxblood: #b4452f; /* danger */
    --oxblood-bg: #f6e1da;
    --honey: #c8821f; /* warning (= ember) */
    --honey-bg: #f8ead0;
    --steel: #5f7a82; /* info — dusty, never blue-purple */
    --steel-bg: #e2eaec;
    /* ============================================================
     SEMANTIC ALIASES — :root defaults to the APP "paper" theme.
     ============================================================ */
    --bg: #f0ece6;
    --surface: #faf8f4;
    --surface-raised: #ffffff;
    --surface-sunken: var(--parchment-100);
    --surface-inset: var(--parchment-200);
    --text: #221913;
    --text-strong: var(--ink-900);
    --text-muted: var(--smoke-500);
    --text-faint: var(--smoke-400);
    --text-on-accent: #fffaf0;
    --border: rgba(56,46,34,0.12);
    --border-strong: rgba(56,46,34,0.22);
    --divider: rgba(56,46,34,0.08);
    --accent: var(--ember-600);
    --accent-hover: var(--ember-700);
    --accent-active: var(--ember-800);
    --accent-soft: var(--ember-50);
    --ring: rgba(168,101,15,0.40);
    --selection-bg: var(--ember-100);
    --selection-fg: var(--ink-900);
}

/* ============================================================
   DUSK THEME — dark mode for both the app and the marketing site.
   Espresso surfaces lifted off pure black — warm enough for long
   writing sessions, dark enough to feel like the desk-lamp brand.
   Apply to an app or marketing wrapper: class="dusk" or data-theme="dusk".
   ============================================================ */
.dusk,
[data-theme="dusk"] {
    --bg: #17120d;
    --surface: #1f1810;
    --surface-raised: #271f16;
    --surface-sunken: #120d09;
    --surface-inset: rgba(255,232,196,0.05);
    --text: #ece3d4;
    --text-strong: var(--parchment-50);
    --text-muted: #ab9c87;
    --text-faint: #7c6d5a;
    --text-on-accent: var(--ink-900);
    --border: rgba(243,236,221,0.11);
    --border-strong: rgba(243,236,221,0.20);
    --divider: rgba(243,236,221,0.07);
    --accent: var(--ember-400);
    --accent-hover: var(--ember-300);
    --accent-active: var(--ember-500);
    --accent-soft: rgba(212,148,42,0.14);
    --ring: rgba(212,148,42,0.45);
    --selection-bg: rgba(212,148,42,0.28);
    --selection-fg: var(--parchment-50);
    /* warmer, shallower elevation for the dark app */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.40);
    --shadow-md: 0 4px 14px rgba(0,0,0,0.45);
    --shadow-lg: 0 18px 40px rgba(0,0,0,0.55);
}


/* ===== tokens/typography.css ===== */
/* ============================================================
   PLOTFY · TYPOGRAPHY
   Display: Playfair Display  (cinematic literary italic headlines)
   Reading: Spectral          (the writing & body surface)
   UI:      Hanken Grotesk    (calm app chrome)
   Mono:    JetBrains Mono    (word counts, timestamps, metadata)
   ============================================================ */

:root {
    --font-display: 'Playfair Display', 'Georgia', serif;
    --font-serif: 'Spectral', 'Georgia', serif;
    --font-sans: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
    /* ---- Type scale (1rem = 16px) ---- */
    --text-xs: 0.75rem; /* 12 */
    --text-sm: 0.8125rem; /* 13 */
    --text-base: 0.9375rem; /* 15 — app body */
    --text-md: 1.0625rem; /* 17 — reading body */
    --text-lg: 1.25rem; /* 20 */
    --text-xl: 1.5rem; /* 24 */
    --text-2xl: 2rem; /* 32 */
    --text-3xl: 2.75rem; /* 44 */
    --text-4xl: 3.75rem; /* 60 */
    --text-5xl: 5rem; /* 80 — hero */
    /* ---- Weights ---- */
    --weight-light: 300;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    /* ---- Line height ---- */
    --leading-none: 1;
    --leading-tight: 1.12;
    --leading-snug: 1.3;
    --leading-normal: 1.55;
    --leading-reading: 1.75; /* long-form prose */
    /* ---- Letter spacing ---- */
    --tracking-tight: -0.015em;
    --tracking-normal: 0;
    --tracking-wide: 0.04em;
    --tracking-caps: 0.22em; /* "WHERE IDEAS TAKE SHAPE" small-caps */
}


/* ===== tokens/spacing.css ===== */
/* ============================================================
   PLOTFY · SPACING & SIZING — 4px base grid
   ============================================================ */

:root {
    --space-0: 0;
    --space-1: 0.25rem; /* 4  */
    --space-2: 0.5rem; /* 8  */
    --space-3: 0.75rem; /* 12 */
    --space-4: 1rem; /* 16 */
    --space-5: 1.5rem; /* 24 */
    --space-6: 2rem; /* 32 */
    --space-7: 2.5rem; /* 40 */
    --space-8: 3rem; /* 48 */
    --space-9: 4rem; /* 64 */
    --space-10: 6rem; /* 96 */
    --space-11: 8rem; /* 128 */
    /* Layout */
    --container: 1180px;
    --container-prose: 680px; /* ideal reading measure */
    --gutter: var(--space-5);
    --sidebar-w: 264px;
    /* Control sizing */
    --control-sm: 32px;
    --control-md: 40px;
    --control-lg: 48px;
}


/* ===== tokens/effects.css ===== */
/* ============================================================
   PLOTFY · EFFECTS — radii, borders, shadows, glow, motion
   ============================================================ */

:root {
    /* ---- Corner radii — restrained, literary (not bubbly) ---- */
    --radius-xs: 3px;
    --radius-sm: 5px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 18px;
    --radius-pill: 999px;
    /* ---- Borders ---- */
    --border-hair: 1px;
    --border-thick: 1.5px;
    /* ---- Shadows — warm, soft (PAPER theme) ---- */
    --shadow-sm: 0 1px 2px rgba(40,29,19,0.08);
    --shadow-md: 0 4px 14px rgba(40,29,19,0.10);
    --shadow-lg: 0 18px 40px rgba(40,29,19,0.16);
    --shadow-xl: 0 30px 70px rgba(40,29,19,0.22);
    /* ---- Noir depth & the ember glow ---- */
    --shadow-noir: 0 24px 70px rgba(0,0,0,0.65);
    --glow-ember: 0 0 24px rgba(212,148,42,0.35);
    --glow-ember-soft: 0 0 60px rgba(212,148,42,0.22);
    /* The signature lamp-on-button: inset top sheen + outer warmth */
    --sheen-amber: inset 0 1px 0 rgba(255,232,196,0.30), inset 0 -1px 0 rgba(0,0,0,0.25), 0 2px 8px rgba(0,0,0,0.35); /* @kind shadow */
    /* ---- Focus ring ---- */
    --focus-ring: 0 0 0 3px var(--ring);
    /* ---- Motion — calm, quiet. No bounce. ---- */
    --ease-quiet: cubic-bezier(0.4, 0.0, 0.2, 1); /* @kind other */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
    --dur-fast: 140ms; /* @kind other */
    --dur-base: 220ms; /* @kind other */
    --dur-slow: 420ms; /* @kind other */
    --dur-cinematic: 900ms; /* @kind other */
}