/* ==========================================================================
   GLOBAL KNIVES - JAPANESE PRECISION DESIGN SYSTEM
   Forged in Niigata since 1985. Cromova 18 steel. 15-degree edge.
   ========================================================================== */

:root {
  /* ==========================================================================
     BRAND SIGNATURE COLORS
     ========================================================================== */

  /* Ink - Near-black, the forged steel ground */
  --color-ink: #0E1112;
  --color-ink-soft: #1A1F21;
  --color-graphite: #2B3033;

  /* Steel - Brushed metallic greys */
  --color-steel: #4A5258;
  --color-steel-light: #8A9298;
  --color-silver: #B8C0C5;
  --color-chrome: #DDE3E6;

  /* Vermillion - Japanese accent (the brand dot) */
  --color-vermillion: #C8102E;
  --color-vermillion-light: #E63946;
  --color-vermillion-dark: #9B0E22;

  /* Blade - Cool edge highlight */
  --color-blade: #E8EEF1;

  /* ==========================================================================
     BRAND ASSIGNMENT
     ========================================================================== */

  --color-primary: var(--color-ink);
  --color-primary-light: var(--color-graphite);
  --color-accent: var(--color-vermillion);
  --color-accent-light: var(--color-vermillion-light);
  --color-accent-dark: var(--color-vermillion-dark);

  /* ==========================================================================
     NEUTRAL PALETTE - Paper & Stone
     ========================================================================== */

  --color-white: #FFFFFF;
  --color-paper: #F7F7F5;
  --color-mist: #EFF1F1;
  --color-fog: #E5EAED;
  --color-stone: #CFD6DB;

  /* Text Colors */
  --color-text: var(--color-ink);
  --color-text-muted: #50585D;
  --color-text-light: #8A9298;
  --color-text-inverse: #FFFFFF;

  /* ==========================================================================
     SURFACE COLORS
     ========================================================================== */

  --color-bg: var(--color-white);
  --color-bg-alt: var(--color-paper);
  --color-bg-warm: var(--color-mist);
  --color-bg-dark: var(--color-ink);

  /* ==========================================================================
     BORDER & INTERACTION
     ========================================================================== */

  --color-border: var(--color-fog);
  --color-border-strong: var(--color-stone);
  --color-focus: var(--color-vermillion);

  /* ==========================================================================
     STATUS COLORS
     ========================================================================== */

  --color-success: #2E7D5B;
  --color-warning: #C98A1A;
  --color-error: var(--color-vermillion);

  /* ==========================================================================
     TYPOGRAPHY - Condensed display, precise body
     ========================================================================== */

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-mono: 'JetBrains Mono', 'Consolas', monospace;

  --font-light: 300;
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
  --text-4xl: 2.75rem;
  --text-5xl: 3.75rem;
  --text-6xl: 5rem;

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;
  --tracking-wider: 0.12em;
  --tracking-widest: 0.2em;

  /* ==========================================================================
     SPACING
     ========================================================================== */

  --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;
  --space-32: 8rem;

  /* ==========================================================================
     LAYOUT
     ========================================================================== */

  --container-max: 1320px;
  --container-narrow: 760px;
  --container-wide: 1440px;

  /* ==========================================================================
     RADIUS - Sharper edges, knife-precise
     ========================================================================== */

  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* ==========================================================================
     SHADOWS
     ========================================================================== */

  --shadow-sm: 0 1px 2px rgba(14, 17, 18, 0.06);
  --shadow-md: 0 4px 14px rgba(14, 17, 18, 0.09);
  --shadow-lg: 0 12px 32px rgba(14, 17, 18, 0.12);
  --shadow-xl: 0 24px 60px rgba(14, 17, 18, 0.18);
  --shadow-steel: 0 8px 24px rgba(74, 82, 88, 0.15);
  --shadow-inner: inset 0 1px 3px rgba(14, 17, 18, 0.05);

  /* ==========================================================================
     TRANSITIONS
     ========================================================================== */

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 450ms;

  /* ==========================================================================
     Z-INDEX
     ========================================================================== */

  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;

  /* ==========================================================================
     COMPONENT SIZING
     ========================================================================== */

  --btn-height-sm: 38px;
  --btn-height-md: 46px;
  --btn-height-lg: 54px;
  --btn-height-xl: 62px;

  --input-height: 50px;
  --header-height: 76px;
}