/* ==========================================================================
   Kaevor One Design Tokens — v0.4
   Premium pastel visual identity. Every color, spacing and type value used
   across the app is defined here — re-skinning Kaevor One for a new client
   should only require editing this file.

   Internal semantic tokens (--accent, --bg-sidebar, --text-on-dark, etc.)
   keep their v0.1–v0.3 names so layout.css/components.css/charts.js don't
   need touching just to change a color — but every one of them now draws
   from the named pastel palette below.
   ========================================================================== */

:root {
  /* Kaevor Labs brand aliases */
  --kaevor-sage: #79A892;
  --kaevor-mint: #B9DACE;
  --kaevor-blue: #91A7D5;
  --kaevor-lavender: #B7ACD7;
  --kaevor-ink: #252B31;

  /* ---- Named pastel palette (the identity) --------------------------
     Primary = Sage. Never bright/saturated — every color here is a muted
     pastel. "-strong" is the same hue darkened just enough for readable
     text and icons on a white surface; "-soft" is the same hue lightened
     into a tint suitable for card/badge backgrounds.
  ------------------------------------------------------------------- */
  --sage: #79A892;         --sage-strong: #547E6C;         --sage-soft: #EAF3EF;
  --lavender: #B7ACD7;     --lavender-strong: #8477AF;     --lavender-soft: #F3F0F8;
  --accent-blue: #91A7D5;  --accent-blue-strong: #657FBA;  --accent-blue-soft: #EFF2F8;
  --mint: #B9DACE;         --mint-strong: #628F7C;         --mint-soft: #EEF7F3;
  --apricot: #E8BE8A;      --apricot-strong: #C6944F;      --apricot-soft: #FBF3E7;
  --rose: #D99595;         --rose-strong: #A5504F;         --rose-soft: #FBEDED;

  --bg-warm: #F8F4EF;
  --bg-card: #FFFFFF;
  --border-color: #E8E5E1;
  --border-color-strong: #D6D2CA;
  --ink-text: #252B31;
  --muted-text: #747474;
  --faint-text: #9C9C97;

  /* A deep, warm neutral — used sparingly for the handful of intentionally
     "dark" accent moments (toasts, tooltips, the AI brief card) rather
     than for whole-page chrome, which stays light throughout. */
  --espresso-950: #262521;
  --espresso-900: #302F2A;
  --espresso-800: #3B3935;

  /* ---- Legacy ramp aliases --------------------------------------------
     layout.css / components.css / charts.js read these ramp names — kept
     stable so the pastel identity above is the only thing that needed to
     change to re-theme the whole app.
  ------------------------------------------------------------------- */
  --ink-950: var(--espresso-950);
  --ink-900: var(--espresso-900);
  --ink-850: var(--espresso-900);
  --ink-800: var(--espresso-800);
  --ink-700: #4A4843;
  --ink-600: #5C5A54;
  --ink-500: #747066;
  --ink-400: #948F84;

  --amber-50:  var(--apricot-soft);
  --amber-100: #F3DFC0;
  --amber-300: var(--apricot);
  --amber-500: var(--apricot);
  --amber-600: var(--apricot-strong);
  --amber-700: #A67A3D;

  --steel-100: var(--accent-blue-soft);
  --steel-300: var(--accent-blue);
  --steel-500: var(--accent-blue);
  --steel-600: var(--accent-blue-strong);

  --green-100: var(--mint-soft);
  --green-500: var(--mint-strong);
  --green-600: #3E6E59;

  --red-100: var(--rose-soft);
  --red-500: var(--rose-strong);
  --red-600: #7F3E3D;

  --slate-50:  var(--bg-warm);
  --slate-100: #EFEDE9;
  --slate-200: var(--border-color);
  --slate-300: var(--border-color-strong);
  --slate-400: #B3AFA6;
  --slate-500: var(--muted-text);
  --slate-600: #5C5A54;
  --slate-700: #46443E;
  --slate-800: #34322D;
  --slate-900: var(--ink-text);

  /* ---- Semantic tokens ------------------------------------------- */
  --bg-canvas:         var(--bg-warm);
  --bg-surface:        var(--bg-card);
  --bg-surface-alt:    #F0EEEA;
  --bg-surface-sunken: #ECEAE4;
  --bg-sidebar:        #FBFCFA;
  --bg-sidebar-active: var(--sage-soft);
  --bg-sidebar-hover:  rgba(143, 191, 167, 0.09);
  --bg-topbar:         rgba(255, 255, 255, 0.92);

  --text-primary:   var(--ink-text);
  --text-secondary: var(--muted-text);
  --text-muted:     var(--faint-text);

  /* Sidebar is a light panel — its own text/border tokens, distinct from
     the "light text on a dark surface" tokens below (toast, AI cards). */
  --text-sidebar:        var(--ink-text);
  --text-sidebar-muted:  var(--muted-text);
  --text-sidebar-faint:  var(--faint-text);
  --border-sidebar:      var(--border-color);

  /* Light text for the handful of intentionally dark surfaces (toasts,
     tooltips, the AI brief card, the login hero panel) — kept as their
     own tokens since those surfaces stay dark even though the rest of
     the app is light. */
  --text-on-dark:   #F3F2EE;
  --text-on-dark-muted: #C9C6BE;
  --text-on-dark-faint: #A19D93;
  --border-on-dark: rgba(255, 255, 255, 0.10);
  --text-on-accent: var(--ink-text);       /* dark text reads better on a pastel-filled button than white */

  --accent:        var(--sage);
  --accent-strong: var(--sage-strong);
  --accent-soft:   var(--sage-soft);
  --accent-ring:   rgba(143, 191, 167, 0.38);

  --info:    var(--accent-blue);
  --info-soft: var(--accent-blue-soft);
  --success: var(--mint-strong);
  --success-strong: #3E6E59;
  --success-soft: var(--mint-soft);
  --danger:  var(--rose-strong);
  --danger-strong: #7F3E3D;
  --danger-soft: var(--rose-soft);
  --warning: var(--apricot-strong);
  --warning-soft: var(--apricot-soft);

  --border-subtle: var(--border-color);
  --border-strong: var(--border-color-strong);

  /* Softer, more diffused shadows than a typical dark-mode-first system —
     pastel/whitespace-led UIs (Notion, Linear, Stripe) use very low
     opacity, warm-toned shadows rather than cool near-black ones. */
  --shadow-xs: 0 1px 2px rgba(46, 46, 46, 0.04);
  --shadow-sm: 0 1px 2px rgba(46, 46, 46, 0.03), 0 2px 6px rgba(46, 46, 46, 0.04);
  --shadow-md: 0 2px 4px rgba(46, 46, 46, 0.03), 0 8px 20px rgba(46, 46, 46, 0.06);
  --shadow-lg: 0 8px 16px rgba(46, 46, 46, 0.05), 0 20px 40px rgba(46, 46, 46, 0.08);
  --shadow-xl: 0 16px 32px rgba(46, 46, 46, 0.08), 0 32px 64px rgba(46, 46, 46, 0.11);
  --shadow-focus: 0 0 0 3px var(--accent-ring);
  --shadow-inset-hairline: inset 0 0 0 1px var(--border-subtle);

  /* ---- Type -------------------------------------------------------- */
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-xs:   0.75rem;
  --fs-sm:   0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md:   1.0625rem;
  --fs-lg:   1.25rem;
  --fs-xl:   1.625rem;
  --fs-2xl:  2.0625rem;
  --fs-3xl:  2.75rem;

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.55;

  --ls-tight: -0.022em;
  --ls-snug: -0.012em;
  --ls-wide: 0.04em;
  --ls-widest: 0.09em;

  /* ---- Spacing scale ------------------------------------------------ */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 28px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ---- Radii / motion ------------------------------------------------ */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-instant: 90ms;
  --dur-fast: 140ms;
  --dur-med: 240ms;
  --dur-slow: 420ms;
  --dur-slower: 640ms;

  --sidebar-w: 256px;
  --sidebar-w-collapsed: 72px;
  --topbar-h: 68px;
}

/* Status color lookup — used by JS (status-pill) and inline styles */
.status-track   { --status-color: var(--success); --status-soft: var(--success-soft); }
.status-risk     { --status-color: var(--warning); --status-soft: var(--warning-soft); }
.status-delay    { --status-color: var(--danger);  --status-soft: var(--danger-soft); }
.status-done     { --status-color: var(--info);    --status-soft: var(--info-soft); }
.status-neutral  { --status-color: var(--slate-500); --status-soft: var(--slate-100); }