/**
 * Zirve Sürücü Kursu - Design System Variables & Global Tokens
 * Bafra, Samsun
 */

:root {
  /* ==================================================
     GLOBAL LAYOUT TOKENS (RECOMMENDED SYSTEM)
  ================================================== */
  --container: 1200px;
  --container-wide: 1280px;

  --mobile-header-height: 68px;

  --space-section: 80px;
  --space-section-mobile: 52px;

  --gap-xs: 8px;
  --gap-sm: 12px;
  --gap-md: 20px;
  --gap-lg: 32px;
  --gap-xl: 48px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-hero: 18px;

  --zirve-red: #D71920;
  --zirve-red-hover: #B81218;
  --zirve-red-subtle: rgba(215, 25, 32, 0.08);
  --zirve-red-glow: rgba(215, 25, 32, 0.25);

  --zirve-dark: #17191D;
  --zirve-graphite: #24272C;
  --zirve-graphite-light: #2D3137;
  --zirve-card-dark: #1D2024;

  --zirve-light: #F4F3EF;
  --zirve-light-warm: #FAF9F6;
  --zirve-white: #FFFFFF;
  --zirve-muted: #676767;
  --zirve-text: #17191D;

  /* Borders */
  --zirve-border: rgba(0, 0, 0, 0.08);
  --zirve-border-light: rgba(0, 0, 0, 0.05);
  --zirve-border-dark: rgba(255, 255, 255, 0.1);
  --zirve-border-dark-subtle: rgba(255, 255, 255, 0.06);

  /* Legacy variable mappings for full backwards compatibility */
  --container-max-width: var(--container-wide);
  --container-gutter: 1.5rem;

  /* Standard Phase 18 Design Tokens */
  --color-red: var(--zirve-red);
  --color-dark: var(--zirve-dark);
  --color-bg: var(--zirve-light);
  --color-text: var(--zirve-text);
  --color-muted: var(--zirve-muted);

  --color-brand-red: var(--zirve-red);
  --color-brand-deep-red: var(--zirve-red-hover);
  --color-brand-red-dark: var(--zirve-red-hover);
  --color-brand-red-light: var(--zirve-red-subtle);
  --color-brand-charcoal: var(--zirve-dark);
  --color-brand-graphite: var(--zirve-graphite);
  --color-brand-dark: var(--zirve-dark);
  --color-brand-border-dark: var(--zirve-border-dark);
  --color-brand-border-dark-subtle: var(--zirve-border-dark-subtle);

  --color-bg-light: var(--zirve-light);
  --color-bg-warm-white: var(--zirve-light-warm);
  --color-bg-warm-off-white: var(--zirve-light);
  --color-bg-light-gray: #ECEBE7;
  --color-bg-white: var(--zirve-white);
  --color-border-light: var(--zirve-border);
  --color-border-subtle: var(--zirve-border-light);

  --color-text-main: var(--zirve-text);
  --color-text-muted: var(--zirve-muted);
  --color-text-light: #8A8D93;
  --color-text-inverse: var(--zirve-white);

  /* Typography Font Stacks */
  --font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Manrope', sans-serif;

  /* Typography Scale: strictly audited (no 9-10px body/labels) */
  --h1-size: clamp(2.35rem, 4.8vw, 3.6rem);
  --h2-size: clamp(2.125rem, 3.4vw, 2.65rem); /* 34px - 42px */
  --h3-size: clamp(1.25rem, 1.8vw, 1.45rem);
  --body-size: 1rem;       /* 16px */
  --body-small: 0.9375rem; /* 15px */
  --caption-size: 0.8125rem; /* 13px */
  --micro-size: 0.75rem;    /* 12px minimum */

  /* Controlled Spacing Scale */
  --space-xs: var(--gap-xs);  /* 8px */
  --space-sm: var(--gap-sm);  /* 12px */
  --space-md: var(--gap-md);  /* 20px */
  --space-lg: var(--gap-lg);  /* 32px */
  --space-xl: var(--gap-xl);  /* 48px */
  --space-2xl: 3.5rem;        /* 56px */
  --space-3xl: var(--space-section); /* 80px */
  --space-4xl: 6rem;

  /* Controlled Radius System (Audited) */
  --radius-btn: 10px;    /* 9-11px */
  --radius-input: 9px;   /* 8-10px */
  --radius-card: 12px;   /* 10-12px */
  --radius-media: 13px;  /* 12-14px */
  --radius-xl: 18px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 12px 28px -6px rgba(0, 0, 0, 0.09);
  --shadow-xl: 0 20px 36px -8px rgba(0, 0, 0, 0.12);

  /* Transitions — Subtle Motion Pass */
  --ease-subtle: cubic-bezier(0.22, 1, 0.36, 1);
  --transition-fast: 0.18s cubic-bezier(0.22, 1, 0.36, 1);
  --transition-base: 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  --transition-slow: 0.6s cubic-bezier(0.22, 1, 0.36, 1);

  /* Elevation & Z-Index */
  --z-nav: 50;
  --z-sticky: 40;
  --z-modal: 100;
}