/* ==========================================================================
   Ketelo Design System — Tokens
   Single source of truth for color, type, spacing, radii, shadows, motion.
   Import this first; every preview card and component consumes these vars.
   ========================================================================== */

/* ─── Fonts ─────────────────────────────────────────────────────────────── */
/* Ketelo pairs two typefaces, loaded via Google Fonts to match the platform:
     · EB Garamond — the display serif used in the wordmark and for any
       moment that needs voice (hero headlines, in-app section titles,
       pull-quotes, marketing).
     · Montserrat — the workhorse sans for every functional surface:
       buttons, inputs, tables, body copy, nav, chat.
   Weights mirror the app's index.html so type ladders match 1:1. */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

:root {
  /* ── Brand palette (from brandbook pg. "Color Palette") ─────────────── */
  --brand-plum:       #775077;  /* primary — CTAs, active state, brand moments */
  --brand-oxpecker:   #989AC5;  /* lavender — secondary, chart accents, logo */
  --brand-gray-blue:  #B4C1C4;  /* neutral warm — muted text, dividers */
  --brand-charcoal:   #101212;  /* near-black — dark mode bg, wordmark on light */
  --brand-off-white:  #F9F9FA;  /* paper — light mode bg, text on dark */
  --brand-blue:       #98B1C5;  /* supporting — info, links-on-dark */
  --brand-teal:       #98C5C3;  /* supporting — success-adjacent, highlights */

  /* ── Plum scale (tints for hover/active/subtle backgrounds) ─────────── */
  --plum-50:   #f4eef4;
  --plum-100:  #e4d4e4;
  --plum-200:  #c9a8c9;
  --plum-300:  #ae7dae;
  --plum-400:  #935f93;
  --plum-500:  #775077;   /* = --brand-plum */
  --plum-600:  #5c395c;
  --plum-700:  #3f2a3f;
  --plum-800:  #2a1c2a;

  /* ── Oxpecker/lavender scale ────────────────────────────────────────── */
  --oxpecker-50:  #eeeef5;
  --oxpecker-100: #d5d6e7;
  --oxpecker-200: #bbbdd8;
  --oxpecker-300: #a4a6cc;
  --oxpecker-400: #989AC5;  /* = --brand-oxpecker */
  --oxpecker-500: #7d7fb0;
  --oxpecker-600: #606388;

  /* ── Neutral scale (derived from gray-blue + charcoal) ──────────────── */
  --neutral-0:    #ffffff;
  --neutral-50:   #F9F9FA;  /* = --brand-off-white */
  --neutral-100:  #eeeff4;
  --neutral-200:  #e0e0e8;
  --neutral-300:  #c9ccd4;
  --neutral-400:  #B4C1C4;  /* = --brand-gray-blue */
  --neutral-500:  #8d9499;
  --neutral-600:  #5f666a;
  --neutral-700:  #3a3e40;
  --neutral-800:  #1a1c1c;
  --neutral-900:  #101212;  /* = --brand-charcoal */

  /* ── Semantic status (tuned for dark surfaces; light variants below) ── */
  --status-success:  #4caf50;
  --status-success-fg: #81c784;
  --status-warning:  #ff9800;
  --status-warning-fg: #ffb74d;
  --status-error:    #f44336;
  --status-error-fg: #e57373;
  --status-info:     var(--brand-blue);

  /* ── Surface tokens — dark theme (default) ──────────────────────────── */
  --surface-bg:       #101212;   /* app background */
  --surface-card:     #1a1c1c;   /* cards, record panel */
  --surface-sunken:   #161818;   /* sidebar, chat column */
  --surface-elevated: #242728;   /* menus, modals, popovers */
  --surface-hover:    rgba(255, 255, 255, 0.04);
  --surface-active:   rgba(151, 154, 197, 0.12);

  --border-subtle:    rgba(255, 255, 255, 0.08);
  --border-default:   rgba(255, 255, 255, 0.13);
  --border-strong:    rgba(255, 255, 255, 0.22);

  --text-primary:     #F9F9FA;
  --text-secondary:   rgba(249, 249, 250, 0.62);
  --text-tertiary:    rgba(249, 249, 250, 0.38);
  --text-accent:      var(--oxpecker-300);
  --text-on-plum:     #ffffff;

  /* ── Typography — families ──────────────────────────────────────────── */
  --font-display: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --font-sans:    'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

  /* ── Typography — scale (rem on 16px root) ──────────────────────────── */
  --fs-2xs:  0.6875rem;  /* 11 — micro labels, badges */
  --fs-xs:   0.75rem;    /* 12 — captions, meta */
  --fs-sm:   0.8125rem;  /* 13 — body small, table cells, chips */
  --fs-base: 0.875rem;   /* 14 — body default (app density) */
  --fs-md:   0.9375rem;  /* 15 — chat messages, emphasized body */
  --fs-lg:   1rem;       /* 16 — large body */
  --fs-xl:   1.125rem;   /* 18 — h3, modal titles */
  --fs-2xl:  1.25rem;    /* 20 — h2 */
  --fs-3xl:  1.5rem;     /* 24 — h1 in-app */
  --fs-4xl:  2rem;       /* 32 — section marquee */
  --fs-5xl:  2.75rem;    /* 44 — marketing hero */
  --fs-6xl:  4rem;       /* 64 — display (serif wordmark moments) */

  /* ── Weights ────────────────────────────────────────────────────────── */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ── Line height ────────────────────────────────────────────────────── */
  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  /* ── Letter spacing (for small caps, kickers, the display serif) ────── */
  --ls-tight:   -0.01em;
  --ls-normal:  0;
  --ls-wide:    0.04em;
  --ls-wider:   0.08em;   /* kickers, eyebrow labels */

  /* ── Spacing scale (4px base) ───────────────────────────────────────── */
  --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.25rem;   /* 20 */
  --space-6:   1.5rem;    /* 24 */
  --space-8:   2rem;      /* 32 */
  --space-10:  2.5rem;    /* 40 */
  --space-12:  3rem;      /* 48 */
  --space-16:  4rem;      /* 64 */

  /* ── Radii ──────────────────────────────────────────────────────────── */
  --radius-xs:   4px;     /* chips, option pills inside controls */
  --radius-sm:   6px;     /* buttons, inputs, small cards */
  --radius-md:   8px;     /* inputs, table cells, sidebar nav items */
  --radius-lg:   12px;    /* cards, panels */
  --radius-xl:   16px;    /* modals, hero surfaces */
  --radius-2xl:  20px;    /* chat msg bubble (inbound) */
  --radius-pill: 9999px;  /* primary CTA, chat input, tag */

  /* ── Shadows (dark-surface tuned) ───────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.35);
  --shadow-lg: 0 10px 28px rgba(0,0,0,0.4);
  --shadow-xl: 0 20px 60px rgba(0,0,0,0.5);
  --shadow-ring-plum: 0 0 0 3px rgba(119, 80, 119, 0.22);

  /* ── Layout rails ───────────────────────────────────────────────────── */
  --nav-width:            16rem;     /* 256 */
  --nav-width-collapsed:  3.75rem;   /* 60 */
  --chat-width:           25rem;     /* 400 */
  --header-height:        3.5rem;    /* 56 */

  /* ── Motion ─────────────────────────────────────────────────────────── */
  --dur-fast:   120ms;
  --dur-base:   180ms;
  --dur-slow:   260ms;
  --ease-out:        cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ─── Light theme overrides ─────────────────────────────────────────────── */
.theme-light,
[data-theme="light"] {
  --surface-bg:       #F9F9FA;
  --surface-card:     #ffffff;
  --surface-sunken:   #eeeff4;
  --surface-elevated: #ffffff;
  --surface-hover:    rgba(16, 18, 18, 0.04);
  --surface-active:   rgba(119, 80, 119, 0.08);

  --border-subtle:    rgba(16, 18, 18, 0.06);
  --border-default:   rgba(16, 18, 18, 0.12);
  --border-strong:    rgba(16, 18, 18, 0.22);

  --text-primary:     #101212;
  --text-secondary:   rgba(16, 18, 18, 0.64);
  --text-tertiary:    rgba(16, 18, 18, 0.42);
  --text-accent:      var(--brand-plum);

  --status-success-fg: #2e7d32;
  --status-warning-fg: #e65100;
  --status-error-fg:   #c62828;

  --shadow-xs: 0 1px 2px rgba(16, 18, 18, 0.05);
  --shadow-sm: 0 1px 3px rgba(16, 18, 18, 0.08);
  --shadow-md: 0 4px 12px rgba(16, 18, 18, 0.08);
  --shadow-lg: 0 10px 28px rgba(16, 18, 18, 0.10);
  --shadow-xl: 0 20px 60px rgba(16, 18, 18, 0.14);
}

/* ─── Base reset (opt-in — apply to .ketelo root) ───────────────────────── */
.ketelo {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--text-primary);
  background: var(--surface-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.ketelo *, .ketelo *::before, .ketelo *::after { box-sizing: border-box; }

/* ─── Display (serif wordmark voice) ────────────────────────────────────── */
.k-display {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
}

/* ─── Kicker / eyebrow (used in marketing + section dividers) ───────────── */
.k-kicker {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-secondary);
}