/* =========================================================
  TAFRA Core Design System
  File: tafra-tokens.css
  Purpose: Global design variables for all TAFRA themes
  Palette: Synced with Ekhwan Shaheen Tours brand identity
  ========================================================= */

:root {
  /* =========================
    1. Brand Colors
    ========================= */

  /*
     * Extracted directly from Ekhwan Shaheen Tours logo:
     *   • Falcon body / circle stroke → deep navy-blue  #3B5BA8
     *   • Water-wing swoosh / teal accent               #2EC4C4
     *   • White knockout version on teal background     #FFFFFF
     *
     * Travel-app supporting palette:
     *   • Sky blue (destinations / hero tints)          #5BAFD6
     *   • Warm CTA orange (contrast & energy)           #FF6B35
     */

  /* Core brand */
  --tf-brand-blue: #3B5BA8;
  /* primary — falcon / logo circle  */
  --tf-brand-blue-dark: #2D4690;
  /* darker press / hover state      */
  --tf-brand-blue-light: #5578C2;
  /* lighter tint for accents        */

  --tf-brand-teal: #2EC4C4;
  /* secondary — swoosh / water wing */
  --tf-brand-teal-dark: #22A0A0;
  /* hover / pressed teal            */
  --tf-brand-teal-light: #4DD9D9;
  /* soft teal for tags / badges     */
  --tf-brand-teal-soft: rgba(46, 196, 196, 0.12);

  --tf-brand-sky: #5BAFD6;
  /* sky-blue — destinations, images */
  --tf-brand-sky-soft: rgba(91, 175, 214, 0.14);

  /* Semantic primary / secondary */
  --tf-color-primary: var(--tf-brand-blue);
  --tf-color-primary-hover: var(--tf-brand-blue-dark);
  --tf-color-primary-soft: rgba(59, 91, 168, 0.10);

  --tf-color-secondary: var(--tf-brand-teal);
  --tf-color-secondary-hover: var(--tf-brand-teal-dark);
  --tf-color-secondary-soft: var(--tf-brand-teal-soft);

  /* =========================
    2. Semantic Colors
    ========================= */

  --tf-color-success: #1A9E6A;
  --tf-color-warning: #F5A623;
  --tf-color-danger: #E53E3E;
  --tf-color-info: var(--tf-brand-teal);
  --tf-color-dark: var(--tf-color-gray-900);

  /* CTA — warm orange for booking / call-to-action buttons */
  --tf-color-cta: #FF6B35;
  --tf-color-cta-hover: #E05520;
  --tf-gradient-sunrise: linear-gradient(90deg, #FF6B35 0%, #FFB86B 100%);

  /* Brand gradients (hero sections, banners, covers) */
  --tf-gradient-brand: linear-gradient(135deg, #3B5BA8 0%, #2EC4C4 100%);
  --tf-gradient-brand-soft: linear-gradient(135deg, rgba(59, 91, 168, 0.08) 0%, rgba(46, 196, 196, 0.08) 100%);
  --tf-gradient-sky: linear-gradient(180deg, #5BAFD6 0%, #2EC4C4 100%);

  --tf-color-success-soft: rgba(26, 158, 106, 0.12);
  --tf-color-warning-soft: rgba(245, 166, 35, 0.18);
  --tf-color-danger-soft: rgba(229, 62, 62, 0.12);
  --tf-color-info-soft: var(--tf-brand-teal-soft);

  /* =========================
    3. Neutral Colors
    ========================= */

  --tf-color-white: #ffffff;
  --tf-color-black: #000000;

  /* Blue-tinted neutrals — feels more "travel / sky" than pure gray */
  --tf-color-gray-50: #F6F8FB;
  --tf-color-gray-100: #EEF1F7;
  --tf-color-gray-200: #E2E7F0;
  --tf-color-gray-300: #CDD5E4;
  --tf-color-gray-400: #AAB4CC;
  --tf-color-gray-500: #8895AF;
  --tf-color-gray-600: #5F6E8A;
  --tf-color-gray-700: #3E4D69;
  --tf-color-gray-800: #253047;
  --tf-color-gray-900: #131E30;

  /* =========================
    4. Background / Surface
    ========================= */

  --tf-bg-body: #F4F7FB;
  /* light blue-white — airy travel feel */
  --tf-bg-surface: #FFFFFF;
  --tf-bg-muted: #EEF1F7;
  --tf-bg-teal-wash: rgba(46, 196, 196, 0.06);
  /* subtle teal wash for sections       */

  --tf-text-main: #1A2540;
  /* deep navy — readable on travel backgrounds */
  --tf-text-muted: #5F6E8A;
  --tf-text-inverse: #FFFFFF;

  --tf-border-color: #DDE3EE;
  --tf-border-color-light: #EEF1F7;

  /* =========================
    5. Typography
    ========================= */

  --tf-font-family-base: "Cairo", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --tf-font-family-ar: "Cairo", system-ui, sans-serif;
  --tf-font-family-en: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --tf-font-size-xs: 0.75rem;
  --tf-font-size-sm: 0.9rem;
  --tf-font-size-base: 1rem;
  --tf-font-size-md: 1.0625rem;
  --tf-font-size-lg: 1.25rem;
  --tf-font-size-xl: 1.5rem;
  --tf-font-size-xxl: 2rem;

  --tf-font-weight-normal: 400;
  --tf-font-weight-medium: 500;
  --tf-font-weight-semibold: 600;
  --tf-font-weight-bold: 700;

  --tf-line-height-base: 1.5;
  --tf-line-height-heading: 1.25;

  /* =========================
    6. Spacing
    ========================= */

  --tf-space-0: 0;
  --tf-space-1: 0.25rem;
  --tf-space-2: 0.5rem;
  --tf-space-3: 0.75rem;
  --tf-space-4: 1rem;
  --tf-space-5: 1.25rem;
  --tf-space-6: 1.5rem;
  --tf-space-8: 2rem;
  --tf-space-10: 2.5rem;
  --tf-space-12: 3rem;

  /* =========================
    7. Radius
    ========================= */

  --tf-radius-xs: 0.25rem;
  --tf-radius-sm: 0.375rem;
  --tf-radius-md: 0.5rem;
  --tf-radius-lg: 0.75rem;
  --tf-radius-xl: 1rem;
  --tf-radius-pill: 999px;

  /* =========================
    8. Borders
    ========================= */

  --tf-border-width: 1px;
  --tf-border-style: solid;
  --tf-border-default: var(--tf-border-width) var(--tf-border-style) var(--tf-border-color);

  /* =========================
    9. Shadows
    ========================= */

  /* Shadows carry a faint blue tint to harmonize with brand */
  --tf-shadow-xs: 0 1px 2px rgba(59, 91, 168, 0.05);
  --tf-shadow-sm: 0 2px 8px rgba(59, 91, 168, 0.08);
  --tf-shadow-md: 0 6px 18px rgba(59, 91, 168, 0.12);
  --tf-shadow-lg: 0 12px 32px rgba(59, 91, 168, 0.16);
  --tf-shadow-teal: 0 4px 16px rgba(46, 196, 196, 0.22);
  /* selected cards / active states */
  --tf-shadow: var(--tf-shadow-sm);

  --tf-surface-glass: rgba(255, 255, 255, 0.84);
  --tf-blur: 14px;

  /* =========================
    10. Sizing
    ========================= */

  --tf-navbar-height: 48px;
  --tf-utility-navbar-height: 32px;
  --tf-sidebar-width: 260px;
  --tf-sidebar-collapsed-width: 72px;

  --tf-container-max-width: 1320px;
  --tf-input-height: 38px;
  --tf-button-height: 38px;

  /* =========================
    11. Z-index
    ========================= */

  --tf-z-dropdown: 1000;
  --tf-z-sticky: 1020;
  --tf-z-fixed: 1030;
  --tf-z-modal-backdrop: 1040;
  --tf-z-modal: 1050;
  --tf-z-toast: 1060;

  /* =========================
    12. Transitions
    ========================= */

  --tf-transition-fast: 120ms ease-in-out;
  --tf-transition-base: 180ms ease-in-out;
  --tf-transition-slow: 300ms ease-in-out;

  /* =========================
    13. Focus / Accessibility
    ========================= */

  --tf-focus-ring-color: rgba(46, 196, 196, 0.30);
  /* teal focus ring — matches logo accent */
  --tf-focus-ring-width: 0.2rem;
  --tf-focus-ring: 0 0 0 var(--tf-focus-ring-width) var(--tf-focus-ring-color);

  /* =========================
    14. Component Tokens
    ========================= */

  --tf-card-bg: var(--tf-bg-surface);
  --tf-card-border: var(--tf-border-default);
  --tf-card-radius: var(--tf-radius-lg);
  --tf-card-shadow: var(--tf-shadow-sm);

  --tf-table-header-bg: var(--tf-color-gray-100);
  --tf-table-header-color: var(--tf-text-main);
  --tf-table-row-hover-bg: var(--tf-color-gray-50);

  --tf-input-bg: #FFFFFF;
  --tf-input-color: var(--tf-text-main);
  --tf-input-border: var(--tf-border-default);
  --tf-input-radius: var(--tf-radius-md);

  --tf-btn-radius: var(--tf-radius-md);
  --tf-btn-font-weight: var(--tf-font-weight-medium);

  /* Backward-compatible aliases used by early sandbox components */
  --tf-primary: var(--tf-color-primary);
  --tf-secondary: var(--tf-color-secondary);
  --tf-success: var(--tf-color-success);
  --tf-warning: var(--tf-color-warning);
  --tf-danger: var(--tf-color-danger);
  --tf-info: var(--tf-color-info);
  --tf-gold: var(--tf-color-warning);
  --tf-surface: var(--tf-bg-surface);
  --tf-radius: var(--tf-radius-md);
  --tf-primary-soft: var(--tf-color-primary-soft);

  /* =========================
    15. Dark Theme (toggle with `data-theme="dark"` on <html> or <body>)
    ========================= */
}

:root[data-theme='dark'] {
  /* Backgrounds — deep navy pulled from brand blue */
  --tf-bg-body: #0A1628;
  /* very dark brand-navy  */
  --tf-bg-surface: #112040;
  /* card / panel surface  */
  --tf-bg-muted: #0E1A35;
  --tf-bg-teal-wash: rgba(46, 196, 196, 0.08);

  /* Text */
  --tf-text-main: #E8F0FF;
  --tf-text-muted: #8899BB;
  --tf-text-inverse: #0A1628;

  /* Borders */
  --tf-border-color: rgba(255, 255, 255, 0.08);
  --tf-border-color-light: rgba(255, 255, 255, 0.04);

  /* Brand — lightened for dark-mode visibility */
  --tf-color-primary: #6B8FE8;
  --tf-color-primary-hover: #90AAFF;
  --tf-color-primary-soft: rgba(107, 143, 232, 0.14);

  --tf-color-secondary: #3DDADA;
  --tf-color-secondary-hover: #5EEAEA;
  --tf-color-secondary-soft: rgba(61, 218, 218, 0.14);

  --tf-brand-teal: #3DDADA;
  --tf-brand-teal-soft: rgba(61, 218, 218, 0.14);
  --tf-brand-sky: #72C4E8;

  --tf-color-cta: #FF8A57;
  --tf-color-cta-hover: #FF7040;

  /* Gradients on dark */
  --tf-gradient-brand: linear-gradient(135deg, #2D4690 0%, #22A0A0 100%);
  --tf-gradient-brand-soft: linear-gradient(135deg, rgba(107, 143, 232, 0.12) 0%, rgba(61, 218, 218, 0.12) 100%);

  /* Shadows */
  --tf-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.20);
  --tf-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.30);
  --tf-shadow-md: 0 6px 18px rgba(0, 0, 0, 0.40);
  --tf-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.50);
  --tf-shadow-teal: 0 4px 20px rgba(61, 218, 218, 0.28);
  --tf-surface-glass: rgba(17, 32, 64, 0.84);

  /* Focus */
  --tf-focus-ring-color: rgba(61, 218, 218, 0.30);
}