/**
 * COLLATERAL KARTEL - DESIGN TOKENS
 * Derived strictly from Collateral Kartel Brand Guidelines Kit 2026.
 */

:root {
  /* ==========================================================================
     BRAND COLOUR PALETTE
     ========================================================================== */
  /* Primary Colours */
  --color-yellow: #FFD93D;       /* Kartel Yellow - Dominant, backgrounds, logo field */
  --color-ink-blue: #2D27A8;     /* Ink Blue - Secondary, type on yellow, dark accents */
  --color-midnight: #1A1A2E;     /* Midnight - Deep background, premium applications */

  /* Secondary & Accent Colours */
  --color-orange: #FF6B35;       /* Execution Orange - CTAs, highlights, tags (use sparingly) */
  --color-orange-ink: #AA3510;   /* Accessible orange for small text on light surfaces */
  --color-soft-violet: #F0EDFF;   /* Soft Violet - Light bg for corporate material */
  --color-white: #FFFFFF;        /* Pure White - Body text bg, card backgrounds */
  --color-muted-grey: #B8B8B8;    /* Muted Grey - Supporting text, captions, rules */
  
  /* CMYK Visual Accent Tokens */
  --cmyk-c: #00D2FF;
  --cmyk-m: #FF007F;
  --cmyk-y: #FFD93D;
  --cmyk-k: #1A1A2E;

  /* Neutrals & Alpha Overlays */
  --color-midnight-rgb: 26, 26, 46;
  --color-ink-blue-rgb: 45, 39, 168;
  --color-yellow-rgb: 255, 217, 61;
  --color-card-border: #1A1A2E;
  --color-surface-card: #FFFFFF;

  /* ==========================================================================
     TYPOGRAPHY
     ========================================================================== */
  --font-display: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
  --font-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Font Weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  /* ==========================================================================
     TACTILE PHYSICAL SHADOWS & BORDERS (PRINT FLOOR AESTHETIC)
     ========================================================================== */
  --border-thick: 3px solid var(--color-midnight);
  --border-standard: 2px solid var(--color-midnight);
  --border-dashed: 2px dashed var(--color-ink-blue);
  --border-yellow: 2px solid var(--color-yellow);
  --border-orange: 2px solid var(--color-orange);

  /* Hard Physical Drop Shadows */
  --shadow-sm: 3px 3px 0px var(--color-midnight);
  --shadow-md: 5px 5px 0px var(--color-midnight);
  --shadow-lg: 8px 8px 0px var(--color-midnight);
  --shadow-xl: 12px 12px 0px var(--color-midnight);
  --shadow-yellow: 5px 5px 0px var(--color-yellow);
  --shadow-orange: 5px 5px 0px var(--color-orange);

  /* Border Radius */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --radius-pill: 9999px;

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-standard: 250ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Spacing Scale */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --space-5xl: 128px;

  /* Motion Design Tokens */
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 180ms;
  --duration-normal: 320ms;
  --duration-slow: 650ms;

  /* Fluid Typography Scale */
  --text-xs: clamp(0.75rem, 0.72rem + 0.1vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.84rem + 0.15vw, 0.9375rem);
  --text-base: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  --text-lg: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.1rem + 0.65vw, 1.75rem);
  --text-2xl: clamp(1.6rem, 1.25rem + 1.4vw, 2.5rem);
  --text-3xl: clamp(2rem, 1.4rem + 2.5vw, 3.75rem);
  --text-display: clamp(2.5rem, 1.7rem + 4vw, 5.5rem);

  /* Fluid Spacing Scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --page-gutter: clamp(1.125rem, 4vw, 4.5rem);
  --section-space: clamp(4rem, 7vw, 7rem);

  /* Container Max Widths */
  --container-max: 1360px;
  --container-narrow: 980px;
  --header-height: 76px;
}