/* kCollect Design Tokens — "Refined Clarity"
 * Single source of truth for all --kc-* CSS variables.
 * See notes/ux/DESIGN.md §2 for canonical values and rationale. */

:root {
  /* ─── Brand ─── */
  --kc-brand-blue:          #002E58;
  --kc-brand-blue-light:    #0A4A82;
  --kc-brand-blue-dark:     #001D3A;
  --kc-brand-gold:          #FFBF48;
  --kc-brand-gold-hover:    #F0B030;
  --kc-brand-gold-light:    #FFF3D6;
  --kc-brand-gold-subtle:   #FFFBF0;

  /* ─── Neutrals ─── */
  --kc-white:               #FFFFFF;
  --kc-surface:             #F7F8FA;
  --kc-surface-raised:      #FFFFFF;
  --kc-surface-sunken:      #F0F2F5;
  --kc-surface-overlay:     rgba(0, 46, 88, 0.04);

  /* ─── Borders ─── */
  --kc-border-subtle:       #E4E7EC;
  --kc-border-medium:       #CDD5DF;
  --kc-border-strong:       #98A2B3;

  /* ─── Text ─── */
  --kc-text-primary:        #1B2332;
  --kc-text-secondary:      #5D6B82;
  --kc-text-tertiary:       #98A2B3;
  --kc-text-inverse:        #FFFFFF;

  /* ─── Primary action (Gold) ─── */
  --kc-primary:             var(--kc-brand-gold);
  --kc-primary-hover:       var(--kc-brand-gold-hover);
  --kc-primary-light:       var(--kc-brand-gold-light);
  --kc-primary-subtle:      var(--kc-brand-gold-subtle);
  --kc-primary-text:        #1B2332;

  /* ─── Secondary action (Brand Blue) ─── */
  --kc-secondary:           var(--kc-brand-blue);
  --kc-secondary-hover:     var(--kc-brand-blue-light);
  --kc-secondary-light:     #E8F0FA;
  --kc-secondary-subtle:    #F4F8FC;

  /* ─── Semantic ─── */
  --kc-success:             #16A34A;
  --kc-success-light:       #DCFCE7;
  --kc-warning:             #D97706;
  --kc-warning-light:       #FEF3C7;
  --kc-danger:              #DC2626;
  --kc-danger-light:        #FEE2E2;
  /* --kc-error aliases --kc-danger for consistency */
  --kc-error:               #DC2626;
  --kc-error-light:         #FEE2E2;
  --kc-info:                #2563EB;
  --kc-info-light:          #DBEAFE;

  /* ─── Typography ─── */
  --kc-font-family:         'Plus Jakarta Sans', 'DM Sans', system-ui, sans-serif;
  --kc-font-mono:           'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  /* Scale (DESIGN.md names) */
  --kc-text-xs:             0.6875rem;  /* 11px */
  --kc-text-sm:             0.75rem;    /* 12px */
  --kc-text-base:           0.875rem;   /* 14px */
  --kc-text-md:             1rem;       /* 16px */
  --kc-text-lg:             1.125rem;   /* 18px */
  --kc-text-xl:             1.25rem;    /* 20px */
  --kc-text-2xl:            1.5rem;     /* 24px */
  --kc-text-3xl:            1.875rem;   /* 30px */

  /* Aliases (font-size- prefix convention) */
  --kc-font-size-xs:        var(--kc-text-xs);
  --kc-font-size-sm:        var(--kc-text-sm);
  --kc-font-size-base:      var(--kc-text-base);
  --kc-font-size-md:        var(--kc-text-md);
  --kc-font-size-lg:        var(--kc-text-lg);
  --kc-font-size-xl:        var(--kc-text-xl);
  --kc-font-size-2xl:       var(--kc-text-2xl);
  --kc-font-size-3xl:       var(--kc-text-3xl);

  /* Weights */
  --kc-font-regular:        400;
  --kc-font-medium:         500;
  --kc-font-semibold:       600;
  --kc-font-bold:           700;
  --kc-font-extrabold:      800;

  /* Line heights */
  --kc-leading-tight:       1.2;
  --kc-leading-normal:      1.5;
  --kc-leading-relaxed:     1.625;

  /* Letter spacing */
  --kc-tracking-tight:      -0.01em;
  --kc-tracking-normal:     0;
  --kc-tracking-wide:       0.02em;
  --kc-tracking-wider:      0.06em;

  /* ─── Spacing ─── */
  --kc-space-0:     0;
  --kc-space-0-5:   0.125rem;  /* 2px */
  --kc-space-1:     0.25rem;   /* 4px */
  --kc-space-1-5:   0.375rem;  /* 6px */
  --kc-space-2:     0.5rem;    /* 8px */
  --kc-space-3:     0.75rem;   /* 12px */
  --kc-space-4:     1rem;      /* 16px */
  --kc-space-5:     1.25rem;   /* 20px */
  --kc-space-6:     1.5rem;    /* 24px */
  --kc-space-8:     2rem;      /* 32px */
  --kc-space-10:    2.5rem;    /* 40px */
  --kc-space-12:    3rem;      /* 48px */
  --kc-space-16:    4rem;      /* 64px */

  /* ─── Elevation & Shadows ─── */
  --kc-shadow-xs:     0 1px 2px rgba(27, 35, 50, 0.04);
  --kc-shadow-sm:     0 1px 3px rgba(27, 35, 50, 0.06), 0 1px 2px rgba(27, 35, 50, 0.04);
  --kc-shadow-md:     0 4px 8px -2px rgba(27, 35, 50, 0.06), 0 2px 4px -2px rgba(27, 35, 50, 0.04);
  --kc-shadow-lg:     0 12px 16px -4px rgba(27, 35, 50, 0.08), 0 4px 6px -2px rgba(27, 35, 50, 0.03);
  --kc-shadow-xl:     0 20px 24px -4px rgba(27, 35, 50, 0.08), 0 8px 8px -4px rgba(27, 35, 50, 0.03);
  --kc-shadow-float:  0 8px 24px rgba(27, 35, 50, 0.12);
  --kc-shadow-glow:   0 0 0 3px rgba(255, 191, 72, 0.25);
  --kc-shadow-inset:  inset 0 2px 4px rgba(27, 35, 50, 0.05);

  /* ─── Border Radius ─── */
  --kc-radius-sm:    4px;
  --kc-radius-md:    8px;
  --kc-radius-lg:    12px;
  --kc-radius-xl:    16px;
  --kc-radius-2xl:   20px;
  --kc-radius-pill:  9999px;

  /* ─── Transitions & Motion ─── */
  --kc-ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
  --kc-ease-in-out:     cubic-bezier(0.45, 0, 0.55, 1);
  --kc-ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);

  --kc-duration-fast:   120ms;
  --kc-duration-normal: 200ms;
  --kc-duration-slow:   350ms;
  --kc-duration-panel:  400ms;
}