/* =========================================================================
   LCYS Design System · Foundations
   Colors, type, spacing, radii, shadows, motion.
   ========================================================================= */

/* ---------- Web fonts ---------------------------------------------------- */
/* NOTE: Using Google Fonts CDN. If LCYS has custom typefaces, drop .woff2
   files into /fonts and replace these @import lines with @font-face rules. */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Palette · raw ---------------------------------------------- */
  /* Paper neutrals — warm, slightly yellowed. The ground of every surface. */
  --paper-50:  #FBF8F3;  /* lightest — page bg */
  --paper-100: #F6F2EC;  /* default page bg   */
  --paper-200: #EDE7DD;  /* subtle fill, hover */
  --paper-300: #DCD3C4;  /* borders, dividers */
  --paper-400: #B8AC97;  /* muted meta text   */
  --paper-500: #8A7F6C;  /* secondary text    */

  /* Ink — near-black with a warm cast so it sits on paper without vibrating */
  --ink-900: #1A1712;    /* body text, strong */
  --ink-800: #2B2720;
  --ink-700: #3D382F;
  --ink-600: #55504A;

  /* Accent · Terracotta — the one chromatic color. Use sparingly. */
  --terracotta-50:  #FBEFE8;
  --terracotta-100: #F5D9CB;
  --terracotta-300: #DE8564;
  --terracotta-500: #C2552D;  /* brand primary */
  --terracotta-600: #A84621;
  --terracotta-700: #883618;

  /* Supporting · only for data/status. Never decorative. */
  --moss-500:    #5E7A3F;   /* positive / success */
  --moss-100:    #E4ECD8;
  --navy-500:    #2F3E5C;   /* info / link alt    */
  --navy-100:    #DDE3ED;
  --clay-500:    #B8541E;   /* warning            */
  --clay-100:    #F5DDCE;
  --crimson-500: #9B2C2C;   /* error / destructive */
  --crimson-100: #F5D7D7;

  /* ---------- Semantic · light (default) -------------------------------- */
  --bg:            var(--paper-100);
  --bg-raised:     var(--paper-50);
  --bg-sunken:     var(--paper-200);
  --bg-inverse:    var(--ink-900);

  --fg:            var(--ink-900);   /* primary text */
  --fg-muted:      var(--paper-500); /* secondary   */
  --fg-subtle:     var(--paper-400); /* tertiary / meta */
  --fg-inverse:    var(--paper-50);
  --fg-accent:     var(--terracotta-600);

  --border:        var(--paper-300);
  --border-strong: var(--paper-400);
  --border-accent: var(--terracotta-500);

  --accent:        var(--terracotta-500);
  --accent-hover:  var(--terracotta-600);
  --accent-press:  var(--terracotta-700);
  --accent-bg:     var(--terracotta-50);

  --success:       var(--moss-500);
  --success-bg:    var(--moss-100);
  --info:          var(--navy-500);
  --info-bg:       var(--navy-100);
  --warning:       var(--clay-500);
  --warning-bg:    var(--clay-100);
  --danger:        var(--crimson-500);
  --danger-bg:     var(--crimson-100);

  /* ---------- Type families -------------------------------------------- */
  --font-display: 'Instrument Serif', 'Times New Roman', Georgia, serif;
  --font-body:    'Geist', ui-sans-serif, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- Type scale ------------------------------------------------ */
  /* Using a ~1.2–1.25 scale from 14px base. Display jumps harder. */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   22px;
  --fs-xl:   28px;
  --fs-2xl:  36px;
  --fs-3xl:  48px;
  --fs-4xl:  64px;
  --fs-5xl:  88px;
  --fs-6xl:  120px;

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;

  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.015em;
  --tracking-normal:   0em;
  --tracking-wide:     0.04em;
  --tracking-wider:    0.12em;

  /* ---------- Spacing (4px grid) --------------------------------------- */
  --space-0:  0;
  --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;
  --space-10: 128px;
  --space-11: 192px;

  /* ---------- Radii ----------------------------------------------------- */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;   /* default for small controls */
  --radius-md:   8px;
  --radius-lg:   12px;  /* cards, panels */
  --radius-xl:   20px;
  --radius-pill: 999px;

  /* ---------- Shadows --------------------------------------------------- */
  /* Light, warm-tinted. We prefer hairline borders over shadow; reach for
     shadow only when elevation must be felt (menus, modals, toast). */
  --shadow-xs: 0 1px 0 rgba(26, 23, 18, 0.04);
  --shadow-sm: 0 1px 2px rgba(26, 23, 18, 0.06), 0 1px 1px rgba(26, 23, 18, 0.04);
  --shadow-md: 0 4px 12px rgba(26, 23, 18, 0.08), 0 2px 4px rgba(26, 23, 18, 0.04);
  --shadow-lg: 0 12px 32px rgba(26, 23, 18, 0.10), 0 4px 8px rgba(26, 23, 18, 0.05);
  --shadow-xl: 0 24px 56px rgba(26, 23, 18, 0.14), 0 8px 16px rgba(26, 23, 18, 0.06);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.5),
                  inset 0 -1px 0 rgba(26, 23, 18, 0.06);

  /* ---------- Motion ---------------------------------------------------- */
  --ease-out:   cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in:    cubic-bezier(0.6, 0.05, 0.85, 0.3);
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.35, 1);
  --dur-fast:   150ms;
  --dur-base:   220ms;
  --dur-slow:   380ms;

  /* ---------- Layout ---------------------------------------------------- */
  --container-narrow: 640px;
  --container-base:   960px;
  --container-wide:   1200px;
  --container-full:   1440px;
}

/* ---------- Dark mode — swap semantics only ------------------------------ */
[data-theme="dark"] {
  --bg:            #15120E;
  --bg-raised:     #1E1A15;
  --bg-sunken:     #0E0C09;
  --bg-inverse:    var(--paper-50);

  --fg:            var(--paper-50);
  --fg-muted:      #A89E8B;
  --fg-subtle:     #6E6657;
  --fg-inverse:    var(--ink-900);

  --border:        #2E2923;
  --border-strong: #443D34;

  --accent:        var(--terracotta-300);
  --accent-hover:  var(--terracotta-500);
  --accent-bg:     rgba(194, 85, 45, 0.16);

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.5);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.6);
}

/* =========================================================================
   Reset-ish + semantic type classes
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  font-feature-settings: "ss01", "cv11";
}

/* Display — serif, tight, optical-sized-ish */
.display-1, h1.display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-6xl);
  line-height: 0.95;
  letter-spacing: var(--tracking-tighter);
}
.display-2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-5xl);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
}

/* Standard heading ramp */
h1, .h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-5);
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-4);
}
h3, .h3 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-3);
}
h4, .h4 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-3);
}
h5, .h5 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-2);
}

/* Body */
p, .body {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  margin: 0 0 var(--space-4);
  color: var(--fg);
  text-wrap: pretty;
}
.body-lg { font-size: var(--fs-md); line-height: var(--lh-relaxed); }
.body-sm { font-size: var(--fs-sm); line-height: var(--lh-normal); }

/* Meta / labels */
.eyebrow, .label {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* Code */
code, kbd, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
code {
  background: var(--bg-sunken);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border);
}

/* Italic serif — LCYS signature for emphasis in long-form copy */
em.display, .serif-italic {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
}

/* Links */
a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--paper-300);
  transition: text-decoration-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}
a:hover { text-decoration-color: var(--terracotta-500); }

/* Selection */
::selection { background: var(--terracotta-100); color: var(--ink-900); }

/* Horizontal rule */
hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--space-6) 0;
}