/* ============================================================
   OPET Otobil — Colors & Type Foundations
   Brand: OPET mavisi + otobil turuncusu. Face of brand: Opedo.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500&family=Baloo+2:wght@500;600;700;800&display=swap');

:root {
  /* ---- Brand core ---- */
  --otobil-orange:      #F25822;
  --otobil-orange-600:  #DA4A18;
  --otobil-orange-300:  #FB8A5E;
  --otobil-orange-100:  #FFE7DB;

  --opet-blue:          #2E72BD;
  --opet-blue-700:      #1F568F;
  --opet-blue-900:      #14385C;
  --opet-blue-300:      #7FAEDE;
  --opet-blue-100:      #E4EEF8;

  --opedo-yellow:       #F5C410;
  --opedo-yellow-600:   #D9A800;
  --opedo-yellow-100:   #FDF3CF;

  /* ---- Neutrals ---- */
  --ink-900: #131A22;
  --ink-700: #2C3742;
  --ink-500: #5A6776;
  --ink-300: #97A2AE;
  --line:    #E2E7EC;
  --line-2:  #EFF2F5;
  --surface: #FFFFFF;
  --surface-2: #F6F8FA;
  --surface-3: #EEF2F6;

  /* ---- Semantic ---- */
  --fg1: var(--ink-900);
  --fg2: var(--ink-500);
  --fg3: var(--ink-300);
  --fg-on-brand: #FFFFFF;
  --bg1: var(--surface);
  --bg2: var(--surface-2);

  --success: #1F9D63;
  --warning: #F2A40B;
  --danger:  #E0392B;
  --info:    var(--opet-blue);

  /* ---- Type families ---- */
  --font-display: 'Baloo 2', system-ui, sans-serif;
  --font-brand:   'Baloo 2', system-ui, sans-serif;
  --font-body:    'Plus Jakarta Sans', system-ui, sans-serif;

  /* ---- Radii ---- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-pill: 999px;

  /* ---- Shadow ---- */
  --shadow-sm: 0 1px 2px rgba(20,56,92,.06), 0 1px 3px rgba(20,56,92,.08);
  --shadow-md: 0 6px 18px rgba(20,56,92,.10);
  --shadow-lg: 0 18px 44px rgba(20,56,92,.16);
  --shadow-brand: 0 14px 30px rgba(242,88,34,.28);

  /* ---- Spacing scale ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
}

/* --- Base type styles --------------------------------------- */
.h1 { font-family: var(--font-display); font-weight: 800; font-size: 56px; line-height: 1.04; letter-spacing: -.02em; color: var(--fg1); }
.h2 { font-family: var(--font-display); font-weight: 800; font-size: 40px; line-height: 1.08; letter-spacing: -.018em; color: var(--fg1); }
.h3 { font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 1.15; letter-spacing: -.01em; color: var(--fg1); }
.h4 { font-family: var(--font-display); font-weight: 700; font-size: 21px; line-height: 1.25; color: var(--fg1); }
.lead  { font-family: var(--font-body); font-weight: 500; font-size: 19px; line-height: 1.5; color: var(--fg2); }
.body  { font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 1.6; color: var(--fg1); }
.small { font-family: var(--font-body); font-weight: 500; font-size: 13px; line-height: 1.45; color: var(--fg2); }
.eyebrow { font-family: var(--font-display); font-weight: 700; font-size: 12px; line-height: 1; letter-spacing: .14em; text-transform: uppercase; color: var(--otobil-orange); }

* { box-sizing: border-box; }