/**
 * Kombyno BRAND design tokens (marketing, landing page, logo surfaces).
 *
 * SCOPE: this is the brand / marketing system (warm teal + coral + Space
 * Grotesk). It is deliberately SEPARATE from the in-app UI tokens at
 * packages/ui/src/tokens.css (the dark-navy, prototype-verified product theme).
 * Do not mix them. All variables here are namespaced --kb-* so the two systems
 * can coexist in one repo without collision.
 *
 * Light is the default. Dark applies via [data-theme="dark"] or the OS setting
 * (unless [data-theme="light"] forces light). See DESIGN.md.
 */

:root {
  /* ---- Raw palette (do not use directly in components; use the roles below) ---- */
  --kb-teal-50:  #eaf7f4;
  --kb-teal-100: #cdede6;
  --kb-teal-300: #57c9b8;
  --kb-teal-500: #12907f;
  --kb-teal-700: #0c6e62;   /* primary brand */
  --kb-teal-800: #0a5a50;   /* primary hover */
  --kb-teal-900: #063a33;

  --kb-coral-100: #fce3d9;
  --kb-coral-300: #f6a98e;
  --kb-coral-500: #f0724c;  /* accent, the wink */
  --kb-coral-600: #da5b37;  /* accent hover */

  --kb-gold-300: #f1d08a;
  --kb-gold-500: #e7b24c;   /* secondary accent */
  --kb-gold-600: #ce9a2f;

  --kb-cream:    #fbf4ea;
  --kb-white:    #ffffff;
  --kb-sand:     #f5eee1;
  --kb-ink:      #0e1512;
  --kb-ink-2:    #16201c;
  --kb-ink-3:    #1e2a25;

  /* Data-viz categorical (brand side, e.g. a landing net-worth illustration) */
  --kb-viz-1: #0c6e62;
  --kb-viz-2: #f0724c;
  --kb-viz-3: #e7b24c;
  --kb-viz-4: #7a5af0;
  --kb-viz-5: #3e6dd8;
  --kb-viz-6: #5f9e8f;

  /* ---- Semantic roles (LIGHT, default) ---- */
  --kb-bg:            var(--kb-cream);
  --kb-surface:       var(--kb-white);
  --kb-surface-2:     var(--kb-sand);
  --kb-text:          var(--kb-ink);
  --kb-text-secondary:#4a5551;
  --kb-text-muted:    #6e7a75;
  --kb-border:        rgba(14, 21, 18, 0.10);
  --kb-border-strong: rgba(14, 21, 18, 0.18);

  --kb-primary:       var(--kb-teal-700);   /* fills: buttons, tile. Constant in both modes */
  --kb-primary-hover: var(--kb-teal-800);
  --kb-on-primary:    var(--kb-cream);
  --kb-link:          var(--kb-teal-700);    /* text/links: shifts lighter in dark */

  --kb-accent:        var(--kb-coral-500);
  --kb-accent-hover:  var(--kb-coral-600);
  --kb-on-accent:     var(--kb-white);

  --kb-success: #1fa97e;
  --kb-warning: var(--kb-gold-500);
  --kb-danger:  #d9534f;
  --kb-info:    var(--kb-teal-700);

  --kb-focus-ring: 0 0 0 3px rgba(12, 110, 98, 0.35);

  /* ---- Typography ---- */
  --kb-font-sans:    'Space Grotesk', ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --kb-font-display: var(--kb-font-sans);

  --kb-fw-regular:  400;
  --kb-fw-medium:   500;
  --kb-fw-semibold: 600;   /* wordmark + headings */
  --kb-fw-bold:     700;

  --kb-text-display: 3.5rem;   /* 56 */
  --kb-text-h1:      2.5rem;   /* 40 */
  --kb-text-h2:      2rem;     /* 32 */
  --kb-text-h3:      1.5rem;   /* 24 */
  --kb-text-h4:      1.25rem;  /* 20 */
  --kb-text-lg:      1.125rem; /* 18 */
  --kb-text-base:    1rem;     /* 16 */
  --kb-text-sm:      0.875rem; /* 14 */
  --kb-text-xs:      0.75rem;  /* 12 */

  --kb-lh-tight:   1.1;
  --kb-lh-heading: 1.2;
  --kb-lh-body:    1.6;

  --kb-tracking-tight:  -0.02em;  /* display / headings / wordmark */
  --kb-tracking-normal: 0;

  /* ---- Spacing (4px base) ---- */
  --kb-space-1:  0.25rem;
  --kb-space-2:  0.5rem;
  --kb-space-3:  0.75rem;
  --kb-space-4:  1rem;
  --kb-space-5:  1.25rem;
  --kb-space-6:  1.5rem;
  --kb-space-8:  2rem;
  --kb-space-10: 2.5rem;
  --kb-space-12: 3rem;
  --kb-space-16: 4rem;
  --kb-space-20: 5rem;
  --kb-space-24: 6rem;

  /* ---- Radius ---- */
  --kb-radius-sm:  8px;
  --kb-radius-md:  12px;   /* cards */
  --kb-radius-lg:  16px;
  --kb-radius-xl:  24px;
  --kb-radius-pill: 999px;

  /* ---- Elevation (warm, ink-tinted, subtle) ---- */
  --kb-shadow-1: 0 1px 2px rgba(14, 21, 18, 0.06), 0 4px 12px rgba(14, 21, 18, 0.06);
  --kb-shadow-2: 0 2px 6px rgba(14, 21, 18, 0.08), 0 12px 28px rgba(14, 21, 18, 0.10);
  --kb-shadow-3: 0 6px 16px rgba(14, 21, 18, 0.12), 0 24px 48px rgba(14, 21, 18, 0.16);

  /* ---- Motion ---- */
  --kb-dur-fast: 150ms;
  --kb-dur-base: 250ms;
  --kb-dur-slow: 400ms;
  --kb-ease:     cubic-bezier(0.2, 0, 0, 1);
}

/* ---- Dark: OS preference (unless forced light) ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --kb-bg:            var(--kb-ink);
    --kb-surface:       var(--kb-ink-2);
    --kb-surface-2:     var(--kb-ink-3);
    --kb-text:          var(--kb-cream);
    --kb-text-secondary:#aeb8b3;
    --kb-text-muted:    #78827d;
    --kb-border:        rgba(251, 244, 234, 0.12);
    --kb-border-strong: rgba(251, 244, 234, 0.22);
    --kb-link:          var(--kb-teal-300);
    --kb-on-accent:     #1a0f0b;
    --kb-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 20px rgba(0, 0, 0, 0.4);
    --kb-shadow-2: 0 4px 10px rgba(0, 0, 0, 0.45), 0 16px 36px rgba(0, 0, 0, 0.5);
    --kb-shadow-3: 0 8px 20px rgba(0, 0, 0, 0.5), 0 28px 56px rgba(0, 0, 0, 0.6);
  }
}

/* ---- Dark: explicit override (wins over OS) ---- */
[data-theme="dark"] {
  --kb-bg:            var(--kb-ink);
  --kb-surface:       var(--kb-ink-2);
  --kb-surface-2:     var(--kb-ink-3);
  --kb-text:          var(--kb-cream);
  --kb-text-secondary:#aeb8b3;
  --kb-text-muted:    #78827d;
  --kb-border:        rgba(251, 244, 234, 0.12);
  --kb-border-strong: rgba(251, 244, 234, 0.22);
  --kb-link:          var(--kb-teal-300);
  --kb-on-accent:     #1a0f0b;
  --kb-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 20px rgba(0, 0, 0, 0.4);
  --kb-shadow-2: 0 4px 10px rgba(0, 0, 0, 0.45), 0 16px 36px rgba(0, 0, 0, 0.5);
  --kb-shadow-3: 0 8px 20px rgba(0, 0, 0, 0.5), 0 28px 56px rgba(0, 0, 0, 0.6);
}