/* ============================================================
   Flowdesks Design System — Color & Type Foundations
   ============================================================ */

/* ---- Fonts: Geist (sans + mono) + Newsreader (editorial serif accent) ---- */
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400&display=swap");

:root {
  /* ============================================================
     COLORS — base ramps
     ============================================================ */

  /* Ink (cool near-black) — primary surface in dark mode, primary text in light */
  --ink-50:  #F4F6FA;
  --ink-100: #E5E9F0;
  --ink-200: #C9D1DC;
  --ink-300: #9CA6B8;
  --ink-400: #6B7689;
  --ink-500: #4A5468;
  --ink-600: #2F3849;
  --ink-700: #1C2434;
  --ink-800: #131A28;
  --ink-900: #0B1120;
  --ink-950: #060A14;

  /* Bone (warm off-white) — primary surface in light mode */
  --bone-50:  #FDFDFB;
  --bone-100: #FAFAF7;
  --bone-200: #F2F2EC;
  --bone-300: #E6E5DC;

  /* Jade — primary brand accent. Signals flow, automation, success */
  --jade-50:  #E6FBF4;
  --jade-100: #BFF4DF;
  --jade-200: #7FE8C0;
  --jade-300: #3FD9A1;
  --jade-400: #00D4A0;
  --jade-500: #00B488;
  --jade-600: #008F6D;
  --jade-700: #006A52;
  --jade-800: #004637;
  --jade-900: #00241C;

  /* Amber — secondary accent for warmth, highlights, insights */
  --amber-300: #FFC773;
  --amber-400: #FFA94D;
  --amber-500: #FF8A1F;
  --amber-600: #E36C0A;

  /* Coral — escalation, attention */
  --coral-400: #FF7A66;
  --coral-500: #F5573F;
  --coral-600: #D9381E;

  /* Sky — informational, neutral signals */
  --sky-400: #6BB6FF;
  --sky-500: #3B92F0;
  --sky-600: #2470CC;

  /* ============================================================
     SEMANTIC TOKENS — light theme (default)
     ============================================================ */

  /* Surfaces */
  --bg:         var(--bone-100);   /* page background */
  --bg-elev-1: #FFFFFF;            /* cards, primary panels */
  --bg-elev-2: var(--bone-50);     /* nested surfaces */
  --bg-sunken:  var(--bone-200);   /* sunken / inset surfaces */
  --bg-inverse: var(--ink-900);    /* dark blocks inside light pages */

  /* Foreground (text) */
  --fg-1: var(--ink-900);          /* primary text */
  --fg-2: var(--ink-600);          /* secondary text */
  --fg-3: var(--ink-400);          /* tertiary / placeholder */
  --fg-4: var(--ink-300);          /* disabled / faint */
  --fg-on-accent: var(--ink-950);  /* text on jade fills */
  --fg-on-inverse: var(--bone-100);/* text on ink surfaces */

  /* Borders & dividers */
  --border-subtle: rgba(11, 17, 32, 0.06);
  --border:        rgba(11, 17, 32, 0.10);
  --border-strong: rgba(11, 17, 32, 0.18);
  --divider:       rgba(11, 17, 32, 0.08);

  /* Brand */
  --accent:           var(--jade-400);
  --accent-hover:     var(--jade-500);
  --accent-press:     var(--jade-600);
  --accent-soft:      var(--jade-50);
  --accent-soft-fg:   var(--jade-700);

  /* Semantic state colors */
  --success:    var(--jade-500);
  --success-bg: var(--jade-50);
  --warning:    var(--amber-500);
  --warning-bg: #FFF3E0;
  --danger:     var(--coral-500);
  --danger-bg:  #FFECE8;
  --info:       var(--sky-500);
  --info-bg:    #E8F2FE;

  /* Focus ring */
  --ring: 0 0 0 3px rgba(0, 212, 160, 0.35);

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */

  --font-sans:    "Geist", "Söhne", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-mono:    "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-serif:   "Newsreader", "Iowan Old Style", "Georgia", serif;
  --font-display: var(--font-sans); /* use sans tight for display by default */

  /* Type scale — based on a 1.25 modular scale, with tighter tracking on display */
  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 15px;  /* body */
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  38px;
  --text-4xl:  48px;
  --text-5xl:  64px;
  --text-6xl:  84px;

  /* Line heights */
  --lh-tight:   1.04;
  --lh-snug:    1.18;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;

  /* Letter spacing */
  --tracking-tight: -0.025em;
  --tracking-snug:  -0.015em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.12em;  /* for eyebrow / uppercase labels */

  /* ============================================================
     SPACING — 4px base
     ============================================================ */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ============================================================
     RADII — Flowdesks uses moderate rounding; never pill-shaped UI surfaces
     ============================================================ */
  --radius-xs:    4px;   /* chips, tag borders */
  --radius-sm:    6px;   /* inputs, small buttons */
  --radius-md:    10px;  /* default buttons, menus */
  --radius-lg:    14px;  /* cards */
  --radius-xl:    20px;  /* hero panels */
  --radius-2xl:   28px;  /* feature cards */
  --radius-full:  999px; /* avatars, badges only */

  /* ============================================================
     SHADOWS — soft, never colored. Use sparingly.
     ============================================================ */
  --shadow-xs: 0 1px 1px rgba(11, 17, 32, 0.04);
  --shadow-sm: 0 1px 2px rgba(11, 17, 32, 0.06), 0 1px 1px rgba(11, 17, 32, 0.04);
  --shadow-md: 0 6px 14px -6px rgba(11, 17, 32, 0.12), 0 2px 4px rgba(11, 17, 32, 0.05);
  --shadow-lg: 0 18px 36px -16px rgba(11, 17, 32, 0.18), 0 4px 10px rgba(11, 17, 32, 0.05);
  --shadow-xl: 0 32px 60px -24px rgba(11, 17, 32, 0.22), 0 8px 16px rgba(11, 17, 32, 0.06);

  /* Inner shadow — used on inputs and "inset" panels */
  --shadow-inset: inset 0 1px 0 rgba(11, 17, 32, 0.04), inset 0 0 0 1px var(--border);

  /* Jade glow — for primary CTA hover and focus highlight on dark surfaces */
  --glow-jade: 0 0 0 0 rgba(0, 212, 160, 0), 0 8px 24px -6px rgba(0, 212, 160, 0.28);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:   120ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;
}

/* ============================================================
   DARK THEME
   ============================================================ */
[data-theme="dark"], .dark {
  --bg:         var(--ink-950);
  --bg-elev-1: var(--ink-900);
  --bg-elev-2: var(--ink-800);
  --bg-sunken:  var(--ink-950);
  --bg-inverse: var(--bone-100);

  --fg-1: var(--bone-100);
  --fg-2: var(--ink-200);
  --fg-3: var(--ink-300);
  --fg-4: var(--ink-500);
  --fg-on-inverse: var(--ink-900);

  --border-subtle: rgba(255, 255, 255, 0.06);
  --border:        rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.18);
  --divider:       rgba(255, 255, 255, 0.08);

  --accent-soft:    rgba(0, 212, 160, 0.12);
  --accent-soft-fg: var(--jade-300);
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Use either by tag or by class (.h1, .body, etc.)
   ============================================================ */

html, body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.display-1, h1.display, .h-display {
  font-family: var(--font-display);
  font-size: var(--text-6xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 500;
  color: var(--fg-1);
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 500;
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  font-weight: 500;
}

h3, .h3 {
  font-size: var(--text-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  font-weight: 500;
}

h4, .h4 {
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  font-weight: 500;
}

h5, .h5 {
  font-size: var(--text-md);
  line-height: var(--lh-snug);
  font-weight: 600;
}

.eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent-soft-fg);
}

p, .body {
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  text-wrap: pretty;
}

.lede {
  font-size: var(--text-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  font-weight: 400;
}

.caption, small {
  font-size: var(--text-xs);
  color: var(--fg-3);
  letter-spacing: 0.01em;
}

code, kbd, .code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-feature-settings: "ss03";
}

.editorial {
  /* Newsreader italic — used very sparingly for one-word emphasis in marketing headlines */
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.005em;
}