/* ============================================================
   TravlFun Design System · tokens.css · v1.0
   Canonical design tokens. Components read ONLY these variables —
   never raw hex values. Import order: fonts.css → tokens.css →
   components.css.
   ============================================================ */

:root {
  /* ---- Brand color primitives (do not use directly in components) ---- */
  --tf-raw-blue-500: #176BFF;
  --tf-raw-blue-400: #3D82FF;
  --tf-raw-blue-300: #4D8DFF;
  --tf-raw-blue-600: #0E4FC7;
  --tf-raw-blue-050: #E3EDFF;
  --tf-raw-teal-500: #12B8A6;
  --tf-raw-teal-400: #2CCBB9;
  --tf-raw-teal-600: #0D9284;
  --tf-raw-teal-050: #DDF6F2;
  --tf-raw-yellow-500: #FFC83D;
  --tf-raw-yellow-050: #FFF3D6;
  --tf-raw-coral-500: #FF6B5E;
  --tf-raw-coral-400: #FF8177;
  --tf-raw-coral-050: #FFE9E6;
  --tf-raw-navy-500: #12304A;
  --tf-raw-navy-700: #0B2032;
  --tf-raw-navy-400: #16405F;
  --tf-raw-cloud: #F8FBFF;
  --tf-raw-gray: #E9EFF5;

  /* ---- Semantic color tokens (light theme) ---- */
  --tf-color-primary: var(--tf-raw-blue-500);
  --tf-color-primary-hover: var(--tf-raw-blue-400);
  --tf-color-primary-active: var(--tf-raw-blue-600);
  --tf-color-primary-soft: var(--tf-raw-blue-050);
  --tf-color-secondary: var(--tf-raw-teal-500);
  --tf-color-secondary-active: var(--tf-raw-teal-600);
  --tf-color-secondary-soft: var(--tf-raw-teal-050);
  --tf-color-accent: var(--tf-raw-yellow-500);
  --tf-color-accent-soft: var(--tf-raw-yellow-050);
  --tf-color-love: var(--tf-raw-coral-500);
  --tf-color-love-soft: var(--tf-raw-coral-050);

  --tf-color-success: var(--tf-raw-teal-600);
  --tf-color-success-soft: var(--tf-raw-teal-050);
  --tf-color-warning: #B97D0C;
  --tf-color-warning-soft: var(--tf-raw-yellow-050);
  --tf-color-danger: #E0473A;
  --tf-color-danger-soft: var(--tf-raw-coral-050);
  --tf-color-info: var(--tf-raw-blue-500);
  --tf-color-info-soft: var(--tf-raw-blue-050);

  --tf-bg: var(--tf-raw-cloud);
  --tf-surface: #FFFFFF;
  --tf-surface-2: #F2F7FC;          /* subtle wells, table stripes */
  --tf-surface-inverse: var(--tf-raw-navy-700);
  --tf-border: #E3ECF4;
  --tf-border-strong: #D3E1EE;
  --tf-ink: var(--tf-raw-navy-500); /* all reading text */
  --tf-ink-2: #54708A;              /* secondary text */
  --tf-ink-3: #758CA2;              /* placeholders, captions */
  --tf-ink-inverse: #EAF3FB;
  --tf-ink-inverse-2: #B9CDDE;

  --tf-scrim: linear-gradient(180deg, rgba(18,48,74,0) 30%, rgba(11,32,50,.86) 100%);
  --tf-overlay: rgba(11, 32, 50, .55);
  --tf-gradient-horizon: linear-gradient(120deg, var(--tf-raw-blue-500), var(--tf-raw-teal-500));

  /* Logo part colors (consumed by the .tf-mark SVG symbol) */
  --c-sun: var(--tf-raw-yellow-500);
  --c-ray: var(--tf-raw-yellow-500);
  --c-w1: var(--tf-raw-teal-500);
  --c-w2: var(--tf-raw-blue-500);
  --c-p1: #5D9BFF;
  --c-p2: var(--tf-raw-blue-500);
  --c-dash: var(--tf-raw-navy-500);

  /* ---- Typography ---- */
  --tf-font-display: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --tf-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --tf-text-display: 700 clamp(34px, 5vw, 48px)/1.15 var(--tf-font-display);
  --tf-text-h1: 700 clamp(28px, 4vw, 34px)/1.2 var(--tf-font-display);
  --tf-text-h2: 600 26px/1.3 var(--tf-font-display);
  --tf-text-h3: 600 20px/1.4 var(--tf-font-display);
  --tf-text-h4: 600 16px/1.4 var(--tf-font-display);
  --tf-text-price: 600 18px/1.4 var(--tf-font-display);
  --tf-text-body-l: 400 18px/1.6 var(--tf-font-body);
  --tf-text-body: 400 15.5px/1.6 var(--tf-font-body);
  --tf-text-body-s: 400 13.5px/1.55 var(--tf-font-body);
  --tf-text-label: 600 12.5px/1.3 var(--tf-font-body);
  --tf-text-caption: 500 11px/1.4 var(--tf-font-body);
  --tf-tracking-caps: .12em;

  /* ---- Space (4px base) ---- */
  --tf-sp-1: 4px;  --tf-sp-2: 8px;  --tf-sp-3: 12px; --tf-sp-4: 16px;
  --tf-sp-5: 20px; --tf-sp-6: 24px; --tf-sp-7: 32px; --tf-sp-8: 40px;
  --tf-sp-9: 56px; --tf-sp-10: 72px;

  /* ---- Radii ---- */
  --tf-r-ctl: 12px;    /* buttons, inputs */
  --tf-r-card: 20px;   /* cards, modals */
  --tf-r-pill: 999px;  /* tags, pills, avatars */
  --tf-r-media: 14px;  /* images inside cards */

  /* ---- Elevation ---- */
  --tf-shadow-1: 0 1px 2px rgba(18,48,74,.06), 0 2px 8px rgba(18,48,74,.06);
  --tf-shadow-2: 0 2px 6px rgba(18,48,74,.07), 0 12px 32px rgba(18,48,74,.10);
  --tf-shadow-3: 0 4px 12px rgba(18,48,74,.08), 0 24px 56px rgba(18,48,74,.14);
  --tf-edge-primary: 0 2px 0 var(--tf-color-primary-active);
  --tf-edge-secondary: 0 2px 0 var(--tf-color-secondary-active);
  --tf-focus-ring: 0 0 0 3px var(--tf-color-primary-soft);

  /* ---- Motion ---- */
  --tf-ease: cubic-bezier(.2, .7, .3, 1);
  --tf-dur-fast: .12s;
  --tf-dur-med: .2s;

  /* ---- Z-index ladder ---- */
  --tf-z-nav: 100;
  --tf-z-dropdown: 200;
  --tf-z-drawer: 300;
  --tf-z-modal: 400;
  --tf-z-toast: 500;

  /* ---- Breakpoints (reference — use in media queries)
     mobile  < 640px
     tablet  640–1023px
     desktop ≥ 1024px  ---- */
}

/* ============ Dark theme ============ */
/* Token-level overrides only; components never branch on theme. */
@media (prefers-color-scheme: dark) {
  :root {
    --tf-color-primary: var(--tf-raw-blue-300);
    --tf-color-primary-hover: #78A8FF;
    --tf-color-primary-active: var(--tf-raw-blue-400);
    --tf-color-primary-soft: #16304F;
    --tf-color-secondary: var(--tf-raw-teal-400);
    --tf-color-secondary-active: var(--tf-raw-teal-500);
    --tf-color-secondary-soft: #0F3231;
    --tf-color-accent-soft: #3D3116;
    --tf-color-love: var(--tf-raw-coral-400);
    --tf-color-love-soft: #43241F;
    --tf-color-success: var(--tf-raw-teal-400);
    --tf-color-success-soft: #0F3231;
    --tf-color-warning: #FFC83D;
    --tf-color-warning-soft: #3D3116;
    --tf-color-danger: var(--tf-raw-coral-400);
    --tf-color-danger-soft: #43241F;
    --tf-color-info: var(--tf-raw-blue-300);
    --tf-color-info-soft: #16304F;

    --tf-bg: #0B1D2E;
    --tf-surface: #10283D;
    --tf-surface-2: #0D2234;
    --tf-border: #1D3A54;
    --tf-border-strong: #2A4A66;
    --tf-ink: #EAF3FB;
    --tf-ink-2: #A7BDD0;
    --tf-ink-3: #6E8AA3;
    --tf-overlay: rgba(4, 12, 20, .65);
    --c-dash: #9DB9D2;

    --tf-shadow-1: 0 1px 2px rgba(0,0,0,.25), 0 2px 8px rgba(0,0,0,.25);
    --tf-shadow-2: 0 2px 6px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.35);
    --tf-shadow-3: 0 4px 12px rgba(0,0,0,.35), 0 24px 56px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"] {
  --tf-color-primary: var(--tf-raw-blue-300);
  --tf-color-primary-hover: #78A8FF;
  --tf-color-primary-active: var(--tf-raw-blue-400);
  --tf-color-primary-soft: #16304F;
  --tf-color-secondary: var(--tf-raw-teal-400);
  --tf-color-secondary-active: var(--tf-raw-teal-500);
  --tf-color-secondary-soft: #0F3231;
  --tf-color-accent-soft: #3D3116;
  --tf-color-love: var(--tf-raw-coral-400);
  --tf-color-love-soft: #43241F;
  --tf-color-success: var(--tf-raw-teal-400);
  --tf-color-success-soft: #0F3231;
  --tf-color-warning: #FFC83D;
  --tf-color-warning-soft: #3D3116;
  --tf-color-danger: var(--tf-raw-coral-400);
  --tf-color-danger-soft: #43241F;
  --tf-color-info: var(--tf-raw-blue-300);
  --tf-color-info-soft: #16304F;
  --tf-bg: #0B1D2E;
  --tf-surface: #10283D;
  --tf-surface-2: #0D2234;
  --tf-border: #1D3A54;
  --tf-border-strong: #2A4A66;
  --tf-ink: #EAF3FB;
  --tf-ink-2: #A7BDD0;
  --tf-ink-3: #6E8AA3;
  --tf-overlay: rgba(4, 12, 20, .65);
  --c-dash: #9DB9D2;
  --tf-shadow-1: 0 1px 2px rgba(0,0,0,.25), 0 2px 8px rgba(0,0,0,.25);
  --tf-shadow-2: 0 2px 6px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.35);
  --tf-shadow-3: 0 4px 12px rgba(0,0,0,.35), 0 24px 56px rgba(0,0,0,.45);
}
:root[data-theme="light"] {
  --tf-color-primary: var(--tf-raw-blue-500);
  --tf-color-primary-hover: var(--tf-raw-blue-400);
  --tf-color-primary-active: var(--tf-raw-blue-600);
  --tf-color-primary-soft: var(--tf-raw-blue-050);
  --tf-color-secondary: var(--tf-raw-teal-500);
  --tf-color-secondary-active: var(--tf-raw-teal-600);
  --tf-color-secondary-soft: var(--tf-raw-teal-050);
  --tf-color-accent-soft: var(--tf-raw-yellow-050);
  --tf-color-love: var(--tf-raw-coral-500);
  --tf-color-love-soft: var(--tf-raw-coral-050);
  --tf-color-success: var(--tf-raw-teal-600);
  --tf-color-success-soft: var(--tf-raw-teal-050);
  --tf-color-warning: #B97D0C;
  --tf-color-warning-soft: var(--tf-raw-yellow-050);
  --tf-color-danger: #E0473A;
  --tf-color-danger-soft: var(--tf-raw-coral-050);
  --tf-color-info: var(--tf-raw-blue-500);
  --tf-color-info-soft: var(--tf-raw-blue-050);
  --tf-bg: var(--tf-raw-cloud);
  --tf-surface: #FFFFFF;
  --tf-surface-2: #F2F7FC;
  --tf-border: #E3ECF4;
  --tf-border-strong: #D3E1EE;
  --tf-ink: var(--tf-raw-navy-500);
  --tf-ink-2: #54708A;
  --tf-ink-3: #758CA2;
  --tf-overlay: rgba(11, 32, 50, .55);
  --c-dash: var(--tf-raw-navy-500);
  --tf-shadow-1: 0 1px 2px rgba(18,48,74,.06), 0 2px 8px rgba(18,48,74,.06);
  --tf-shadow-2: 0 2px 6px rgba(18,48,74,.07), 0 12px 32px rgba(18,48,74,.10);
  --tf-shadow-3: 0 4px 12px rgba(18,48,74,.08), 0 24px 56px rgba(18,48,74,.14);
}