/* ================================================
   Design Tokens — Design26
   Colors, spacing, typography, shadows, radii
   ================================================ */

:root {
  /* --- Core palette --- */
  --gc-bg: #f5f5f5;
  --gc-surface: #ffffff;
  --gc-primary: #FFE14D;
  --gc-primary-strong: #E5C800;
  --gc-accent: #E53E3E;
  --gc-text: #1a1a1a;
  --gc-muted: #6b7280;
  --gc-border: #e5e7eb;
  --gc-nav-bg: #FFE14D;
  --gc-success: #16a34a;

  /* --- Extended colors --- */
  --gc-white: #ffffff;
  --gc-black: #000000;
  --gc-footer-bg: #0a0a0a;
  --gc-footer-text: #a3a3a3;
  --gc-footer-border: #222222;
  --gc-footer-muted: #737373;
  --gc-badge-code: #22c55e;
  --gc-brand-highlight: #d4a800;
  --gc-btn-dark: #1f2937;
  --gc-btn-dark-hover: #374151;
  --gc-danger: #d32f2f;
  --gc-info: #6366f1;
  --gc-bg-subtle: #fafafa;
  --gc-bg-details: #fafbfc;
  --gc-bg-alt: #f3f4f6;
  --gc-bg-pill: #f4f6fb;
  --gc-bg-card: #f8f9fa;
  --gc-bg-hover: #f9fafb;
  --gc-bg-warm: #fffbeb;
  --gc-bg-info: #fff8db;
  --gc-bg-danger: #fff5f5;
  --gc-bg-success: #f0fdf4;
  --gc-bg-info-alt: #eef2ff;
  --gc-text-dark: #333333;
  --gc-accent-dark: #c53030;
  --gc-dot-red: #ff5f56;
  --gc-dot-yellow: #ffbd2e;
  --gc-dot-green: #27c93f;
  --gc-primary-glow: rgba(255, 225, 77, 0.25);
  --gc-primary-tint: rgba(255, 225, 77, 0.15);

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

  /* --- Font sizes --- */
  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-lg: 17px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 28px;
  --text-4xl: 34px;

  /* --- Font weights --- */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;

  /* --- Border radii --- */
  --radius-sm: 4px;
  --radius: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 50px;

  /* --- Shadows --- */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.2);

  /* --- Layout --- */
  --container: 1140px;
}