/* ============================================================
   Toyota du Maroc — Design Tokens
   ------------------------------------------------------------
   Bu dosya tek doğruluk kaynağı (single source of truth).
   Next.js + Tailwind migrasyonu için: bu değişkenleri
   tailwind.config.js > theme.extend altına 1:1 mapleyin.
   ============================================================ */

:root {
  /* === Brand ============================================ */
  --brand-red:        #FF0022;  /* CTA, accent, primary */
  --brand-red-dark:   #EB0A1E;  /* hover */
  --brand-red-soft:   #FFE5E9;  /* tints */
  --brand-black:      #131319;  /* dominant dark — model pages */

  /* === Neutral scale (light) ============================ */
  --gray-950: #0B0B1C;
  --gray-900: #17191C;
  --gray-800: #292D32;
  --gray-700: #33333A;
  --gray-600: #494950;
  --gray-500: #58595B;
  --gray-400: #8B8C90;
  --gray-300: #ADADAE;
  --gray-200: #CECFD0;
  --gray-150: #D0D0D0;
  --gray-100: #E8E8E8;
  --gray-75:  #F0F0F0;
  --gray-50:  #F4F4F4;
  --gray-25:  #FAFAFA;
  --white:    #FFFFFF;

  /* === Semantic (light mode) ============================ */
  --color-primary:          var(--brand-red);
  --color-primary-hover:    var(--brand-red-dark);
  --color-text:             var(--gray-700);
  --color-text-strong:      var(--gray-800);
  --color-text-muted:       var(--gray-500);
  --color-text-on-dark:     var(--white);
  --color-text-on-dark-mut: rgba(255, 255, 255, 0.72);

  --color-bg:               var(--white);
  --color-bg-soft:          var(--gray-25);
  --color-bg-elevated:      var(--white);
  --color-bg-inverted:      var(--brand-black);

  --color-border:           var(--gray-100);
  --color-border-strong:    var(--gray-200);
  --color-border-on-dark:   rgba(255, 255, 255, 0.18);

  /* === Typography ======================================= */
  /* Toyota Type fallback stack — production'da @font-face ile
     swap edin (bkz. /styles/fonts.css). */
  --font-display: "Toyota Type", "Manrope", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", system-ui, sans-serif;
  --font-body:    "Toyota Type", "Manrope", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", system-ui, sans-serif;
  --font-mono:    "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  /* Type scale — Toyota Type spec'inden (Figma'da 11/12/14/16/18/20/24/36/42) */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  30px;
  --fs-3xl:  36px;
  --fs-display: 42px;
  --fs-hero-mobile: 36px;
  --fs-hero-desktop: 64px;

  /* Line-height */
  --lh-tight:   1.0;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-relaxed: 1.6;

  /* Letter-spacing */
  --ls-tight:  -0.02em;
  --ls-normal:  0;
  --ls-wide:    0.04em;
  --ls-wider:   0.08em;

  /* === Spacing scale (4px base) ========================= */
  --s-0:   0;
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   20px;
  --s-6:   24px;
  --s-8:   32px;
  --s-10:  40px;
  --s-12:  48px;
  --s-16:  64px;
  --s-20:  80px;
  --s-24:  96px;
  --s-32:  128px;

  /* === Radius =========================================== */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  24px;
  --radius-pill: 999px;

  /* === Shadow / elevation =============================== */
  --shadow-xs:    0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-sm:    0 2px 8px rgba(16, 24, 40, 0.06);
  --shadow-md:    0 8px 24px rgba(16, 24, 40, 0.08);
  --shadow-lg:    0 16px 40px rgba(16, 24, 40, 0.12);
  --shadow-xl:    0 24px 64px rgba(16, 24, 40, 0.16);

  /* Liquid glass — model sayfaları + navbar */
  --glass-bg:           rgba(255, 255, 255, 0.12);
  --glass-bg-strong:    rgba(255, 255, 255, 0.24);
  --glass-bg-dark:      rgba(19, 19, 25, 0.32);
  --glass-border:       rgba(255, 255, 255, 0.28);
  --glass-shadow:       0 4px 24px rgba(0, 0, 0, 0.14),
                        inset 0 1px 0 rgba(255, 255, 255, 0.4);
  --glass-blur:         18px;
  --glass-saturate:     180%;

  /* === Layout =========================================== */
  --container-max:    1280px;
  --gutter-desktop:   80px;
  --gutter-tablet:    32px;
  --gutter-mobile:    16px;
  --navbar-h:         80px;
  --navbar-h-mobile:  64px;

  /* === Motion =========================================== */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:    cubic-bezier(0.55, 0, 1, 0.45);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast:     150ms;
  --t-base:     220ms;
  --t-slow:     400ms;
  --t-xslow:    700ms;

  /* === Z-index ========================================== */
  --z-base:    1;
  --z-content: 10;
  --z-navbar:  100;
  --z-overlay: 200;
  --z-modal:   300;
  --z-toast:   400;
  --z-tweaks:  9000;
}

/* ============================================================
   Dark mode — tweaks paneli üzerinden açılır
   ============================================================ */
[data-theme="dark"] {
  --color-text:             #E6E6EA;
  --color-text-strong:      #FFFFFF;
  --color-text-muted:       #A4A4AC;
  --color-bg:               #0B0B12;
  --color-bg-soft:          #131319;
  --color-bg-elevated:      #1A1A24;
  --color-border:           rgba(255, 255, 255, 0.08);
  --color-border-strong:    rgba(255, 255, 255, 0.14);
}