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

/* =============================================================================
   TOKENS.CSS — Design tokens / CSS custom properties
   Pet Transfer Bodrum — PREMIUM_CONCIERGE design system
   ============================================================================= */

:root {
  /* ── Brand Colors ─────────────────────────────────────────── */
  /* Deep midnight blue-green — premium, calm, trustworthy */
  --color-primary:       #1B3A4B;
  --color-primary-dark:  #0D2433;
  --color-primary-light: #234E63;

  /* Warm sand/gold — emotional warmth, premium accent */
  --color-accent:        #C8963E;
  --color-accent-light:  #E8B96A;
  --color-accent-pale:   #FDF0D5;

  /* Clean neutrals */
  --color-bg:            #FAFAF8;
  --color-bg-alt:        #F3F1EE;
  --color-bg-dark:       #1B3A4B;
  --color-surface:       #FFFFFF;

  /* Text */
  --color-text:          #1A1A2E;
  --color-text-muted:    #5A6478;
  --color-text-light:    #8A95A3;

  /* UI states */
  --color-border:        #E4E1DC;
  --color-border-dark:   rgba(255,255,255,0.12);
  --color-success:       #2A7B5C;
  --color-error:         #C0392B;

  /* ── Shadows — warm tinted ───────────────────────────────── */
  --shadow-xs:     0 1px 3px rgba(27,58,75,0.06);
  --shadow-sm:     0 2px 8px rgba(27,58,75,0.08);
  --shadow-md:     0 6px 24px rgba(27,58,75,0.10);
  --shadow-lg:     0 16px 48px rgba(27,58,75,0.14);
  --shadow-xl:     0 24px 64px rgba(27,58,75,0.18);
  --shadow-accent: 0 8px 32px rgba(200,150,62,0.25);

  /* ── Glass ───────────────────────────────────────────────── */
  --glass-bg:     rgba(255,255,255,0.07);
  --glass-border: rgba(255,255,255,0.12);

  /* ── Typography ─────────────────────────────────────────── */
  --font-heading: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;

  /* Type scale */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  2rem;
  --text-4xl:  2.75rem;
  --text-5xl:  3.75rem;

  /* ── Spacing ─────────────────────────────────────────────── */
  --space-section:    120px;
  --space-section-sm: 72px;
  --container-max:    1180px;
  --container-px:     24px;
  --header-h:         72px;

  /* ── Border radii ───────────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-pill: 999px;

  /* ── Motion ─────────────────────────────────────────────── */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 200ms;
  --duration-base: 350ms;
  --duration-slow: 600ms;
}