/*
 * variables.css — Single source of truth for all design tokens.
 * Colors extracted from the Umbrella Trip brand logo:
 *   Navy  #1A2B5E  — "UMBRELLA" wordmark, swoosh, airplane
 *   Blue  #1565C8  — "U" lettermark
 *   Green #2E9E3E  — "TRIP" wordmark / primary brand accent
 *   Yellow #F9D322 — umbrella top highlight
 */

/* ──────────────────────────────────────────────────────────────────────────
   ROOT FONT-SIZE  —  fluid scaling across all screen sizes
   1rem = 0.625rem baseline on standard desktop.
   Larger screens get bigger base, smaller screens get smaller base.
   ────────────────────────────────────────────────────────────────────────── */
html {
  font-size: 62.5%; /* 1rem = 0.625rem */
}

/* Large laptops / desktops */
@media (min-width: 1400px) {
  html { font-size: 66%; } /* 1rem ≈ 0.6625rem  — text feels slightly bigger */
}

/* Wide / 2K / 4K screens */
@media (min-width: 1800px) {
  html { font-size: 70%; } /* 1rem = 0.7rem */
}

/* Tablet */
@media (max-width: 991px) {
  html { font-size: 58%; }
}

/* Mobile */
@media (max-width: 575px) {
  html { font-size: 52%; }
}

/* ──────────────────────────────────────────────────────────────────────────
   CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ────────────────────────────────────────────────────────────────────────── */
:root {

  /* ── Brand palette — Umbrella Trip logo colors ───────────────────────── */
  --color-navy:        #1A2B5E;   /* "UMBRELLA" text + swoosh + airplane   */
  --color-navy-deep:   #0F1A3D;   /* darker navy for sidebar depth          */
  --color-blue:        #1565C8;   /* "U" letter gradient / primary action   */
  --color-blue-light:  #2478E0;   /* lighter tint for hover states          */
  --color-green:       #2E9E3E;   /* "TRIP" wordmark / brand green          */
  --color-green-dark:  #237030;   /* hover/pressed green                    */
  --color-amber:       #2E9E3E;   /* Brand Logo Green (Zero Orange)         */
  --color-amber-dark:  #237030;   /* Hover green                            */
  --color-yellow:      #16A34A;   /* Green                                  */

  /* ── Semantic aliases ────────────────────────────────────────────────── */
  --color-primary:         var(--color-blue);
  --color-primary-dark:    var(--color-navy);
  --color-primary-hover:   var(--color-blue-light);
  --color-secondary:       var(--color-green);
  --color-secondary-hover: var(--color-green-dark);
  --color-accent:          var(--color-green);
  --color-cta:             var(--color-green);
  --color-cta-hover:       var(--color-green-dark);
  --color-gold:            var(--color-green);

  /* ── Text colors ──────────────────────────────────────────────────────── */
  --color-text-primary:  var(--color-navy);
  --color-text-muted:    #5A6B85;
  --color-text-light:    #FFFFFF;

  /* ── Backgrounds ──────────────────────────────────────────────────────── */
  --color-bg-body:       #FFFFFF;
  --color-bg-light:      #F4F7FC;
  --color-bg-navy:       var(--color-navy);
  --color-bg-sidebar:    var(--color-navy-deep);

  /* ── Borders ──────────────────────────────────────────────────────────── */
  --color-border:        #DDE3EF;
  --color-border-light:  #EDF1F8;

  /* ── Semantic states ──────────────────────────────────────────────────── */
  --color-success: var(--color-green);
  --color-warning: var(--color-yellow);
  --color-danger:  #D93025;
  --color-info:    var(--color-blue);

  /* ── Tints / overlays ────────────────────────────────────────────────── */
  --color-primary-10:  rgba(21, 101, 200, 0.10);
  --color-primary-20:  rgba(21, 101, 200, 0.20);
  --color-green-10:    rgba(46, 158, 62, 0.10);
  --color-amber-10:    rgba(46, 158, 62, 0.12);
  --color-navy-80:     rgba(26, 43, 94, 0.80);
  --color-navy-10:     rgba(26, 43, 94, 0.08);

  /* ── Spacing scale (rem — 1rem = 0.625rem on desktop) ────────────────────── */
  --space-xs:  0.4rem;   /*  0.25rem */
  --space-sm:  0.8rem;   /*  0.5rem */
  --space-md:  1.6rem;   /* 1rem */
  --space-lg:  2.4rem;   /* 1.5rem */
  --space-xl:  4.0rem;   /* 2.5rem */
  --space-2xl: 6.4rem;   /* 4rem */

  /* ── Border radius ────────────────────────────────────────────────────── */
  --radius-sm:     0.4rem;
  --radius-md:     0.8rem;
  --radius-lg:     1.4rem;
  --radius-xl:     2.0rem;
  --radius-2xl:    3.0rem;
  --radius-pill:   10rem;
  --radius-circle: 50%;

  /* ── Shadows (navy-tinted) ────────────────────────────────────────────── */
  --shadow-sm:   0 0.1rem 0.4rem  rgba(26, 43, 94, 0.08);
  --shadow-md:   0 0.4rem 1.4rem  rgba(26, 43, 94, 0.12);
  --shadow-lg:   0 0.8rem 2.6rem  rgba(26, 43, 94, 0.18);
  --shadow-xl:   0 1.6rem 4.8rem  rgba(26, 43, 94, 0.24);
  --shadow-card: 0 0.2rem 1.2rem  rgba(26, 43, 94, 0.10);

  /* ── Fluid Typography — use clamp() for key headings ─────────────────── */
  --font-family-base:    'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-family-heading: 'Inter', 'Segoe UI', sans-serif;

  /* Fixed scale (rem — scale with html font-size) */
  --font-size-xs:   1.2rem;
  --font-size-sm:   1.4rem;
  --font-size-base: 1.6rem;
  --font-size-md:   1.8rem;
  --font-size-lg:   2.0rem;
  --font-size-xl:   2.4rem;
  --font-size-2xl:  3.0rem;
  --font-size-3xl:  3.8rem;
  --font-size-4xl:  4.8rem;

  /* Fluid clamp() for elements that need responsive sizing */
  --fluid-hero-title:    clamp(2.8rem, 5vw + 0.5rem, 5.6rem);
  --fluid-hero-subtitle: clamp(1.6rem, 2vw + 0.4rem, 2.4rem);
  --fluid-section-title:    clamp(2.0rem, 2.2vw + 0.2rem, 2.8rem);
  --fluid-card-title:    clamp(1.5rem, 1.8vw + 0.2rem, 2.0rem);

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

  --line-height-tight: 1.20;
  --line-height-base:  1.60;
  --line-height-loose: 1.80;

  /* ── Transitions ──────────────────────────────────────────────────────── */
  --transition-fast: 0.15s ease;
  --transition-base: 0.28s ease;
  --transition-slow: 0.45s ease;

  /* ── Z-index layers ───────────────────────────────────────────────────── */
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-sidebar:  300;
  --z-modal:    400;
  --z-toast:    500;

  /* ── Admin layout ─────────────────────────────────────────────────────── */
  --sidebar-width: 26rem;
  --topbar-height: 6.4rem;
}