/*
 * KAPIŞ DESIGN SYSTEM
 * colors_and_type.css
 * CSS Custom Properties — Colors, Typography, Spacing, Radii, Shadows
 * ------------------------------------------------------------------ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {

  /* ─────────────────────────────────────────
     BRAND COLORS
  ───────────────────────────────────────── */
  --color-red:          #E8453C;
  --color-red-light:    #FDECEA;
  --color-red-dark:     #C13029;

  --color-orange:       #F5834A;
  --color-orange-light: #FEF0E8;
  --color-orange-dark:  #D4622A;

  --color-blue:         #3B82F6;
  --color-blue-light:   #EFF6FF;
  --color-blue-dark:    #1D4ED8;

  --color-green:        #22C55E;
  --color-green-light:  #F0FDF4;
  --color-green-dark:   #15803D;

  /* ─────────────────────────────────────────
     NEUTRAL SCALE
  ───────────────────────────────────────── */
  --color-gray-950:     #030712;
  --color-gray-900:     #111827;
  --color-gray-800:     #1F2937;
  --color-gray-700:     #374151;
  --color-gray-600:     #4B5563;
  --color-gray-500:     #6B7280;
  --color-gray-400:     #9CA3AF;
  --color-gray-300:     #D1D5DB;
  --color-gray-200:     #E5E7EB;
  --color-gray-100:     #F3F4F6;
  --color-gray-50:      #F9FAFB;
  --color-white:        #FFFFFF;

  /* ─────────────────────────────────────────
     SEMANTIC / STATUS
  ───────────────────────────────────────── */
  --color-bg:           #FFFFFF;
  --color-bg-tint:      #F9FAFB;
  --color-surface:      #F3F4F6;
  --color-border:       #E5E7EB;
  --color-border-focus: #3B82F6;

  --color-fg-primary:   #111827;
  --color-fg-secondary: #374151;
  --color-fg-tertiary:  #6B7280;
  --color-fg-disabled:  #9CA3AF;
  --color-fg-inverse:   #FFFFFF;

  --color-interactive:  #E8453C;
  --color-interactive-hover: #C13029;
  --color-interactive-press: #A02520;

  /* ─────────────────────────────────────────
     GAME STATE COLORS (Wordle)
  ───────────────────────────────────────── */
  --game-correct:       #22C55E;   /* right letter, right position */
  --game-correct-text:  #FFFFFF;
  --game-present:       #F5834A;   /* right letter, wrong position */
  --game-present-text:  #FFFFFF;
  --game-absent:        #6B7280;   /* not in word */
  --game-absent-text:   #FFFFFF;
  --game-tile-empty:    #FFFFFF;
  --game-tile-empty-border: #E5E7EB;
  --game-tile-active-border: #111827;

  /* ─────────────────────────────────────────
     TYPOGRAPHY — FAMILIES
  ───────────────────────────────────────── */
  --font-display:  'Space Grotesk', system-ui, sans-serif;
  --font-body:     'Inter', system-ui, sans-serif;
  --font-mono:     'JetBrains Mono', 'Courier New', monospace;

  /* ─────────────────────────────────────────
     TYPOGRAPHY — SCALE (px)
  ───────────────────────────────────────── */
  --text-xs:    11px;
  --text-sm:    13px;
  --text-base:  15px;
  --text-md:    17px;
  --text-lg:    20px;
  --text-xl:    24px;
  --text-2xl:   28px;
  --text-3xl:   36px;
  --text-4xl:   48px;

  /* ─────────────────────────────────────────
     TYPOGRAPHY — LINE HEIGHTS
  ───────────────────────────────────────── */
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* ─────────────────────────────────────────
     TYPOGRAPHY — WEIGHTS
  ───────────────────────────────────────── */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;

  /* ─────────────────────────────────────────
     SEMANTIC TYPE ROLES
  ───────────────────────────────────────── */
  --type-h1-size:    28px;
  --type-h1-weight:  700;
  --type-h1-family:  var(--font-display);
  --type-h1-leading: var(--leading-tight);

  --type-h2-size:    24px;
  --type-h2-weight:  700;
  --type-h2-family:  var(--font-display);
  --type-h2-leading: var(--leading-tight);

  --type-h3-size:    20px;
  --type-h3-weight:  600;
  --type-h3-family:  var(--font-display);
  --type-h3-leading: var(--leading-snug);

  --type-h4-size:    17px;
  --type-h4-weight:  600;
  --type-h4-family:  var(--font-body);
  --type-h4-leading: var(--leading-snug);

  --type-body-size:    15px;
  --type-body-weight:  400;
  --type-body-family:  var(--font-body);
  --type-body-leading: var(--leading-normal);

  --type-body-sm-size: 13px;
  --type-caption-size: 11px;
  --type-caption-weight: 500;

  --type-label-size:   13px;
  --type-label-weight: 600;
  --type-label-tracking: 0.03em;

  --type-tab-size:     11px;
  --type-tab-weight:   500;

  --type-tile-size:    24px;
  --type-tile-weight:  700;
  --type-tile-family:  var(--font-mono);

  --type-timer-size:   36px;
  --type-timer-weight: 700;
  --type-timer-family: var(--font-mono);

  /* ─────────────────────────────────────────
     SPACING
  ───────────────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;

  --screen-px:  20px;   /* horizontal screen padding */
  --card-px:    16px;   /* card internal padding */
  --tab-height: 83px;   /* bottom tab bar height (iOS) */

  /* ─────────────────────────────────────────
     CORNER RADII
  ───────────────────────────────────────── */
  --radius-sm:    6px;
  --radius-md:    8px;
  --radius-lg:    16px;
  --radius-xl:    24px;
  --radius-full:  9999px;

  /* ─────────────────────────────────────────
     SHADOWS
  ───────────────────────────────────────── */
  --shadow-card:  0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-modal: 0 20px 60px rgba(0,0,0,0.15);
  --shadow-tab:   0 -1px 0 rgba(0,0,0,0.06);
  --shadow-none:  none;

  /* ─────────────────────────────────────────
     TRANSITIONS
  ───────────────────────────────────────── */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   350ms;
  --duration-flip:   300ms;

  /* ─────────────────────────────────────────
     Z-INDEX LAYERS
  ───────────────────────────────────────── */
  --z-base:       0;
  --z-card:       10;
  --z-sticky:     100;
  --z-overlay:    200;
  --z-modal:      300;
  --z-notification: 400;
  --z-tooltip:    500;

  /* ─────────────────────────────────────────
     ICON SIZES
  ───────────────────────────────────────── */
  --icon-sm:    16px;
  --icon-base:  24px;
  --icon-lg:    28px;

  /* ─────────────────────────────────────────
     AVATAR SIZES
  ───────────────────────────────────────── */
  --avatar-sm:  32px;
  --avatar-md:  40px;
  --avatar-lg:  56px;
  --avatar-xl:  80px;
}

/* ─────────────────────────────────────────
   GLOBAL BASE STYLES
───────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-fg-primary);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: var(--leading-normal);
}

h1 {
  font-family: var(--type-h1-family);
  font-size: var(--type-h1-size);
  font-weight: var(--type-h1-weight);
  line-height: var(--type-h1-leading);
  color: var(--color-fg-primary);
}

h2 {
  font-family: var(--type-h2-family);
  font-size: var(--type-h2-size);
  font-weight: var(--type-h2-weight);
  line-height: var(--type-h2-leading);
  color: var(--color-fg-primary);
}

h3 {
  font-family: var(--type-h3-family);
  font-size: var(--type-h3-size);
  font-weight: var(--type-h3-weight);
  line-height: var(--type-h3-leading);
  color: var(--color-fg-primary);
}

h4 {
  font-family: var(--type-h4-family);
  font-size: var(--type-h4-size);
  font-weight: var(--type-h4-weight);
  line-height: var(--type-h4-leading);
  color: var(--color-fg-primary);
}

p {
  font-family: var(--font-body);
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-leading);
  color: var(--color-fg-secondary);
}

code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.9em;
}