/* =====================================================================
   Çitlembik Peyzaj — Design tokens (handoff'tan birebir)
   fonts + colors + typography + spacing/radius/shadow/motion
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  /* ---- Brand greens (primary) ---- */
  --green-900: #112619; /* near-black forest — deepest text / footers */
  --green-800: #16301f;
  --green-700: #1f3d2b; /* PRIMARY brand green */
  --green-600: #2a5639;
  --green-500: #3a9d6b; /* action / fresh leaf */
  --green-400: #57b683;
  --green-300: #86cda2;
  --green-200: #a3d9a5; /* soft mint */
  --green-100: #d4ecd9;
  --green-50:  #eef6ef;

  /* ---- Warm cream / sand neutrals ---- */
  --cream-100: #ffffff;
  --cream-200: #faf8f1;
  --cream-300: #f4f1e8; /* default page ground */
  --cream-400: #ebe6d8;
  --cream-500: #ddd6c2;
  --sand-600:  #c3b89c;

  /* ---- Warm ink (text on light) ---- */
  --ink-900: #1a241c;
  --ink-700: #38453b;
  --ink-500: #5d6b60;
  --ink-400: #7d8a80;

  /* ---- Gold accent (premium seasoning) ---- */
  --gold-600: #b08a36;
  --gold-500: #c9a44c; /* primary gold */
  --gold-400: #d8bd74;
  --gold-200: #ecdcae;

  /* ---- Earth ---- */
  --earth-700: #5b4a32;
  --earth-500: #8a7250;

  /* ---- Utility ---- */
  --whatsapp: #25d366;
  --whatsapp-dark: #1da851;
  --danger: #c0492f;
  --white: #ffffff;
  --black: #0c1610;

  /* ---- Semantic aliases ---- */
  --brand: var(--green-700);
  --brand-strong: var(--green-800);
  --brand-soft: var(--green-200);
  --accent: var(--gold-500);
  --accent-strong: var(--gold-600);

  --bg-page: var(--cream-300);
  --bg-page-alt: var(--cream-200);
  --surface-card: var(--cream-100);
  --surface-sunken: var(--green-50);
  --surface-dark: var(--green-700);
  --surface-darker: var(--green-900);

  --text-strong: var(--ink-900);
  --text-body: var(--ink-700);
  --text-muted: var(--ink-500);
  --text-on-dark: var(--cream-300);
  --text-on-dark-muted: #aebfb0;
  --text-on-brand: var(--cream-100);

  --action: var(--green-500);
  --action-hover: var(--green-600);
  --action-press: var(--green-700);

  --border-soft: var(--cream-400);
  --border-strong: var(--cream-500);
  --border-on-dark: rgba(255,255,255,0.14);
  --focus-ring: var(--green-400);

  /* ---- Typography ---- */
  --font-display: 'Spectral', Georgia, 'Times New Roman', serif;
  --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --fs-display: clamp(2.75rem, 5vw, 4.25rem);
  --fs-h1: clamp(2.1rem, 3.6vw, 3rem);
  --fs-h2: clamp(1.6rem, 2.4vw, 2.1rem);
  --fs-h3: 1.4rem;
  --fs-h4: 1.15rem;

  --fs-lead: 1.2rem;
  --fs-body: 1.0625rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;
  --fs-eyebrow: 0.78rem;

  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  --ls-tight: -0.02em;
  --ls-normal: 0;
  --ls-eyebrow: 0.16em;

  /* ---- Spacing (4px base) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ---- Radius ---- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-xs: 0 1px 2px rgba(31, 61, 43, 0.06);
  --shadow-sm: 0 2px 8px rgba(31, 61, 43, 0.08);
  --shadow-md: 0 8px 24px rgba(31, 61, 43, 0.10);
  --shadow-lg: 0 18px 48px rgba(17, 38, 25, 0.16);
  --shadow-gold: 0 8px 24px rgba(176, 138, 54, 0.22);

  /* ---- Layout ---- */
  --container-max: 1200px;
  --container-narrow: 760px;
  --gutter: clamp(20px, 5vw, 64px);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.2, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 420ms;
}