/* ═══════════════════════════════════════════════════════════
   KMK MUNAI DESIGN SYSTEM — TOKENS
   Single source of truth for every color/type/space/radius/
   shadow/motion value used across the app. Components should
   never hardcode a color or magic number — reference a token.
   ═══════════════════════════════════════════════════════════ */
:root {
  /* ── Neutral scale (9 steps, backgrounds/borders/text) ── */
  --color-gray-50:  #FAFAFA;
  --color-gray-100: #F4F4F5;
  --color-gray-200: #E4E4E7;
  --color-gray-300: #D4D4D8;
  --color-gray-400: #A1A1AA;
  --color-gray-500: #71717A;
  --color-gray-600: #52525B; /* muted text — 7:1 on white, safe for 12px labels */
  --color-gray-700: #3F3F46;
  --color-gray-800: #27272A;
  --color-gray-900: #18181B;

  /* ── Brand — reserved for primary CTA, active nav, logo ── */
  --color-brand-red:        #CC2020;
  --color-brand-red-dark:   #A81818;
  --color-brand-red-light:  #FFF0F0;
  --color-brand-red-bright: #FF4949;
  --color-brand-black:       var(--color-gray-900);
  --color-brand-black-hover: var(--color-gray-800);
  --color-brand-white:       #FFFFFF;

  /* ── Semantic (status / feedback) — distinct from brand red,
     never reused for CTA or destructive actions ── */
  --color-success:      #16A34A;
  --color-success-bg:   #ECFDF3;
  --color-success-text: #15803D;

  --color-warning:      #D97706;
  --color-warning-bg:   #FFFBEB;
  --color-warning-text: #B45309;

  --color-danger:      #DC2626;
  --color-danger-bg:   #FEF2F2;
  --color-danger-text: #B91C1C;

  /* ── Surfaces ── */
  --color-surface-page: var(--color-gray-50);
  --color-surface-card: #FFFFFF;
  --color-border:        var(--color-gray-200);
  --color-border-strong: var(--color-gray-300);

  /* ── Text ── */
  --color-text-primary:   var(--color-gray-900);
  --color-text-secondary: var(--color-gray-600);
  --color-text-muted:     var(--color-gray-400);

  /* Overlay (modal backdrops) */
  --color-overlay: rgba(24, 24, 27, 0.55);

  /* ── Shadows — exactly one for cards, one for modals ── */
  --shadow-card:  0 1px 2px rgba(24,24,27,0.04), 0 1px 3px rgba(24,24,27,0.08);
  --shadow-modal: 0 8px 16px -4px rgba(24,24,27,0.16), 0 20px 40px -8px rgba(24,24,27,0.24);
  --shadow-cta:       0 2px 8px rgba(204,32,32,0.30);
  --shadow-cta-hover: 0 4px 14px rgba(204,32,32,0.40);
  /* Legacy names, remapped so untouched call sites stay consistent */
  --shadow-sm: var(--shadow-card);
  --shadow-md: var(--shadow-card);
  --shadow-lg: var(--shadow-modal);

  /* ── Radii — 8px fields, 12px controls, 16px cards, 999px chips/pills ── */
  --radius-xs: 6px;
  --radius-small: 8px;    /* fields */
  --radius-control: 12px; /* buttons/controls */
  --radius-card: 16px;    /* cards/modals */
  --radius-xl: 20px;
  --radius-full: 999px;   /* chips, badges, segmented controls */

  /* ── Spacing — strict 8px grid (4/8/12/16/24/32) ── */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-12: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;

  /* Nav heights */
  --nav-top: 64px;
  --nav-bottom: 70px;

  /* ── Typography — 12/14/16/18/22, weights 400/500/600 ── */
  --font: 'Montserrat', sans-serif;
  --font-size-xs:  12px; /* labels/meta */
  --font-size-sm:  14px;
  --font-size-md:  16px; /* values/body — dominant over labels */
  --font-size-lg:  18px;
  --font-size-xl:  22px;
  --lh-tight: 1.4;
  --lh-normal: 1.5;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;

  /* ── Motion ── */
  --dur-fast:  0.15s;
  --dur-base:  0.25s;
  --dur-slow:  0.35s;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Focus ring (keyboard / a11y) */
  --focus-ring: 0 0 0 3px rgba(204, 32, 32, 0.18);

  /* Custom select chevron (SVG data-URI, matches --color-text-secondary) */
  --icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%2352525B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}