/* ==========================================================================
   Likoma Airlines — Design Tokens
   --------------------------------------------------------------------------
   Single source of truth for the entire interface. Nothing in this codebase
   should hard-code a colour, radius, shadow, duration or z-index. If a value
   is needed twice, it belongs here.

   Colour source of truth: "Likoma Airlines Ltd Logo files" vector masterfile.
     Blue      #167AFC   (tail fin)
     Dark Blue #1B264F   (wordmark)
     Red       #FD220C   (dot over the "i")

   Ramps are generated by mixing the brand hues with white (tints) and with
   the brand navy (shades) — never with neutral grey — so every step stays
   inside the Likoma colour family.
   ========================================================================== */

:root {
  /* ----------------------------------------------------------------------
     1. BRAND RAMPS
     ---------------------------------------------------------------------- */

  /* Likoma Blue — the primary action colour */
  --blue-50:  #f3f8ff;
  --blue-100: #e8f2ff;
  --blue-200: #d0e4fe;
  --blue-300: #add1fe;
  --blue-400: #8bbdfe;
  --blue-500: #68a9fd;
  --blue-600: #4594fd;
  --blue-700: #167afc;  /* ← brand blue */
  --blue-800: #176de2;
  --blue-900: #1861c8;
  --blue-950: #1854ae;
  --blue-1000: #194894;

  /* Likoma Navy — surfaces, type, and the full neutral ramp.
     Deriving neutrals from the navy keeps greys subtly blue and premium. */
  --navy-25:  #fafbfc;
  --navy-50:  #f6f6f8;
  --navy-100: #edeef1;
  --navy-200: #dddfe5;
  --navy-300: #bbbeca;
  --navy-400: #989eb0;
  --navy-500: #767d95;
  --navy-600: #545c7b;
  --navy-700: #3d4769;
  --navy-800: #1b264f;  /* ← brand navy */
  --navy-900: #161e3f;
  --navy-950: #10172f;

  /* Likoma Red — reserved for accent moments and true errors */
  --red-50:  #fff3f1;
  --red-100: #ffedeb;
  --red-200: #fed3ce;
  --red-300: #fda79e;
  --red-400: #fd7a6d;
  --red-500: #fc4e3d;
  --red-600: #fd220c;  /* ← brand red */
  --red-700: #d71d0a;
  --red-800: #b11808;
  --red-900: #8b1306;

  /* Supporting semantic hues, tuned to sit beside the brand without shouting */
  --green-50:  #e9f8f1;
  --green-100: #d0f0e2;
  --green-600: #0fa36b;
  --green-700: #0c8657;
  --green-800: #0a6a45;

  --amber-50:  #fdf6e7;
  --amber-100: #fbebc8;
  --amber-600: #cf8b0a;
  --amber-700: #a86f08;
  --amber-800: #855806;

  /* ----------------------------------------------------------------------
     2. SEMANTIC COLOUR
     Components reference these, never the ramps above. Swapping a theme
     means reassigning this block and nothing else.
     ---------------------------------------------------------------------- */

  /* Core identity */
  --color-primary:            var(--blue-700);
  --color-primary-hover:      var(--blue-800);
  --color-primary-active:     var(--blue-900);
  --color-primary-soft:       var(--blue-100);
  --color-primary-soft-hover: var(--blue-200);
  --color-on-primary:         #ffffff;

  --color-secondary:          var(--navy-800);
  --color-secondary-hover:    var(--navy-900);
  --color-secondary-active:   var(--navy-950);
  --color-secondary-soft:     var(--navy-100);
  --color-on-secondary:       #ffffff;

  --color-accent:             var(--red-600);
  --color-accent-hover:       var(--red-700);
  --color-accent-soft:        var(--red-100);
  --color-on-accent:          #ffffff;

  /* Elevation surfaces, lightest → most recessed */
  --color-background:      #ffffff;
  --color-background-alt:  var(--navy-50);
  --color-background-deep: var(--navy-800);
  --color-surface:         #ffffff;
  --color-surface-raised:  #ffffff;
  --color-surface-sunken:  var(--navy-50);
  --color-card:            #ffffff;
  --color-overlay:         rgb(16 23 47 / 0.55);
  --color-scrim:           rgb(16 23 47 / 0.32);

  /* Borders — deliberately faint; hierarchy comes from space, not lines */
  --color-border:        var(--navy-200);
  --color-border-subtle: var(--navy-100);
  --color-border-strong: var(--navy-300);
  --color-divider:       var(--navy-100);

  /* Type */
  --color-text-primary:   var(--navy-800);
  --color-text-secondary: var(--navy-600);
  --color-text-muted:     var(--navy-500);
  --color-text-inverse:   #ffffff;
  --color-text-on-dark:   rgb(255 255 255 / 0.72);
  --color-text-link:      var(--blue-900);
  --color-text-link-hover: var(--blue-1000);

  /* Status. `-fg` steps are contrast-checked for body text on their `-bg`. */
  --color-danger:     var(--red-600);
  --color-danger-bg:  var(--red-50);
  --color-danger-fg:  var(--red-800);

  --color-warning:    var(--amber-600);
  --color-warning-bg: var(--amber-50);
  --color-warning-fg: var(--amber-800);

  --color-success:    var(--green-600);
  --color-success-bg: var(--green-50);
  --color-success-fg: var(--green-800);

  --color-info:       var(--blue-700);
  --color-info-bg:    var(--blue-50);
  --color-info-fg:    var(--blue-950);

  /* Interaction states */
  --color-hover-tint:    rgb(27 38 79 / 0.04);
  --color-active-tint:   rgb(27 38 79 / 0.08);
  --color-focus-ring:    var(--blue-700);
  --color-focus-halo:    rgb(22 122 252 / 0.18);
  --color-selection-bg:  var(--blue-100);
  --color-selection-fg:  var(--navy-800);
  --color-disabled-bg:   var(--navy-100);
  --color-disabled-fg:   var(--navy-400);
  --color-disabled-border: var(--navy-200);

  /* Dark grounds.
     These were three-stop gradients that drifted from navy into blue; the
     drift was the single most "designed" thing on the page. They are now
     effectively flat navy, with only enough movement to stop a large field of
     colour looking like a printing error. */
  --gradient-sky:   linear-gradient(180deg, #16203f 0%, var(--navy-800) 100%);
  --gradient-dawn:  linear-gradient(180deg, var(--navy-800) 0%, #18224a 100%);
  --gradient-brand: var(--color-primary);
  --gradient-mist:  var(--navy-50);
  --gradient-sheen: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.4), transparent);

  /* ----------------------------------------------------------------------
     3. TYPOGRAPHY
     Outfit is the brand typeface (per the identity deck). Loaded as a single
     variable woff2 covering 300–700.
     ---------------------------------------------------------------------- */
  --font-sans: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Code", Menlo, Consolas, monospace;
  --font-numeric: var(--font-sans);

  /* Weights. 700 exists for the display scale only — never for UI copy. */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Type scale — 1.200 minor third, tuned by hand at the display end so
     headings gain presence from spacing rather than raw size. */
  --text-2xs:  0.6875rem; /* 11px */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.8125rem; /* 13px */
  --text-base: 0.9375rem; /* 15px — UI default */
  --text-md:   1rem;      /* 16px — body copy */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.375rem;  /* 22px */
  --text-2xl:  1.625rem;  /* 26px */
  --text-3xl:  2rem;      /* 32px */
  --text-4xl:  2.5rem;    /* 40px */
  --text-5xl:  3.25rem;   /* 52px */
  --text-6xl:  4rem;      /* 64px */
  --text-7xl:  4.75rem;   /* 76px */

  /* Fluid display sizes for hero and section openers.
     Pulled back from the previous ceiling: at 76px the headline was doing the
     work that space and position should do, and it fought the wordmark. */
  --text-display-sm: clamp(1.625rem, 1.3rem + 1.3vw, 2.125rem);  /* 26 → 34 */
  --text-display-md: clamp(1.875rem, 1.4rem + 2vw,   2.75rem);   /* 30 → 44 */
  --text-display-lg: clamp(2.25rem,  1.6rem + 2.7vw, 3.5rem);    /* 36 → 56 */

  --leading-none:    1;
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;
  --leading-loose:   1.85;

  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.018em;
  --tracking-normal:  0em;
  --tracking-wide:    0.02em;
  --tracking-wider:   0.06em;
  --tracking-widest:  0.14em;

  --measure-narrow: 34ch;
  --measure-base:   62ch;
  --measure-wide:   78ch;

  /* ----------------------------------------------------------------------
     4. SPACING — 4px base unit
     ---------------------------------------------------------------------- */
  --space-0:   0;
  --space-px:  1px;
  --space-0-5: 0.125rem; /*  2 */
  --space-1:   0.25rem;  /*  4 */
  --space-1-5: 0.375rem; /*  6 */
  --space-2:   0.5rem;   /*  8 */
  --space-2-5: 0.625rem; /* 10 */
  --space-3:   0.75rem;  /* 12 */
  --space-4:   1rem;     /* 16 */
  --space-5:   1.25rem;  /* 20 */
  --space-6:   1.5rem;   /* 24 */
  --space-7:   1.75rem;  /* 28 */
  --space-8:   2rem;     /* 32 */
  --space-10:  2.5rem;   /* 40 */
  --space-12:  3rem;     /* 48 */
  --space-14:  3.5rem;   /* 56 */
  --space-16:  4rem;     /* 64 */
  --space-20:  5rem;     /* 80 */
  --space-24:  6rem;     /* 96 */
  --space-28:  7rem;     /* 112 */
  --space-32:  8rem;     /* 128 */
  --space-40:  10rem;    /* 160 */

  /* Vertical rhythm between page sections — fluid, so mobile never feels airy
     for the wrong reason and desktop never feels cramped. */
  --section-y:       clamp(3.5rem, 2rem + 6vw, 7rem);
  --section-y-tight: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  --section-y-loose: clamp(4.5rem, 2.5rem + 8vw, 9rem);

  /* ----------------------------------------------------------------------
     5. RADIUS
     Restrained on purpose. Heavily rounded corners read as software; an
     airline should read closer to print. Corners are softened just enough to
     avoid looking severe, and no further.
     ---------------------------------------------------------------------- */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   3px;
  --radius-md:   4px;
  --radius-lg:   6px;
  --radius-xl:   8px;
  --radius-2xl:  10px;
  --radius-3xl:  12px;
  --radius-full: 9999px;

  /* Component-level radius aliases so a rounding change is one edit.
     Genuinely circular things — avatars, status dots, icon buttons — keep
     referencing --radius-full directly. */
  --radius-control: var(--radius-md);  /* inputs, selects */
  --radius-button:  var(--radius-md);
  --radius-card:    var(--radius-md);
  --radius-panel:   var(--radius-lg);
  --radius-sheet:   var(--radius-lg);

  /* ----------------------------------------------------------------------
     6. ELEVATION
     Structure comes from hairlines and space, not from drop shadows. What is
     left here is used for things that genuinely float above the page —
     dropdowns, modals, the drawer — and for nothing else.
     ---------------------------------------------------------------------- */
  --shadow-none: none;
  --shadow-xs:  0 1px 1px rgb(16 23 47 / 0.03);
  --shadow-sm:  0 1px 2px rgb(16 23 47 / 0.04);
  --shadow-md:  0 2px 6px rgb(16 23 47 / 0.05);
  --shadow-lg:  0 4px 14px rgb(16 23 47 / 0.07);
  --shadow-xl:  0 10px 28px rgb(16 23 47 / 0.09);
  --shadow-2xl: 0 18px 48px rgb(16 23 47 / 0.12);
  --shadow-inner: inset 0 1px 2px rgb(16 23 47 / 0.05);

  /* The hairline that replaces most former shadows. Applied as a ring so it
     never affects layout the way a border would. */
  --shadow-ring: 0 0 0 1px var(--color-border);

  /* No coloured glows. A primary button earns its prominence from its fill,
     not from a halo. Kept as tokens so nothing referencing them breaks. */
  --shadow-primary:    var(--shadow-none);
  --shadow-primary-lg: var(--shadow-none);
  --shadow-accent:     var(--shadow-none);

  --focus-ring: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-focus-ring);
  --focus-ring-inset: inset 0 0 0 2px var(--color-focus-ring);

  /* ----------------------------------------------------------------------
     7. MOTION
     Everything is short and eased-out. Nothing bounces.
     ---------------------------------------------------------------------- */
  --duration-instant: 80ms;
  --duration-fast:    140ms;
  --duration-base:    220ms;
  --duration-slow:    340ms;
  --duration-slower:  520ms;
  --duration-glacial: 900ms;

  --ease-linear:  linear;
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);      /* the house curve */
  --ease-in:      cubic-bezier(0.55, 0, 1, 0.45);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-soft:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-emphasis: cubic-bezier(0.2, 0.8, 0.2, 1);

  --transition-colors: color var(--duration-fast) var(--ease-soft),
                       background-color var(--duration-fast) var(--ease-soft),
                       border-color var(--duration-fast) var(--ease-soft),
                       fill var(--duration-fast) var(--ease-soft);
  --transition-transform: transform var(--duration-base) var(--ease-out);
  --transition-shadow: box-shadow var(--duration-base) var(--ease-out);
  --transition-opacity: opacity var(--duration-base) var(--ease-soft);
  --transition-all: all var(--duration-base) var(--ease-out);

  /* Hover lift, applied via transform so it never reflows. Deliberately small
     — the movement should be felt at the edge of vision, not watched. */
  --lift-sm: translateY(-1px);
  --lift-md: translateY(-2px);
  --lift-lg: translateY(-3px);

  /* ----------------------------------------------------------------------
     8. OPACITY
     ---------------------------------------------------------------------- */
  --opacity-0:  0;
  --opacity-5:  0.05;
  --opacity-10: 0.1;
  --opacity-20: 0.2;
  --opacity-40: 0.4;
  --opacity-60: 0.6;
  --opacity-80: 0.8;
  --opacity-90: 0.9;
  --opacity-100: 1;
  --opacity-disabled: 0.45;
  --opacity-muted: 0.64;

  /* ----------------------------------------------------------------------
     9. Z-INDEX — named layers only; no magic numbers anywhere else
     ---------------------------------------------------------------------- */
  --z-below:     -1;
  --z-base:       0;
  --z-raised:     10;
  --z-sticky:     100;
  --z-header:     200;
  --z-dropdown:   300;
  --z-drawer:     400;
  --z-overlay:    500;
  --z-modal:      600;
  --z-popover:    700;
  --z-toast:      800;
  --z-tooltip:    900;
  --z-max:        9999;

  /* ----------------------------------------------------------------------
     10. LAYOUT
     ---------------------------------------------------------------------- */
  --container-xs:  32rem;   /*  512 */
  --container-sm:  40rem;   /*  640 */
  --container-md:  48rem;   /*  768 */
  --container-lg:  64rem;   /* 1024 */
  --container-xl:  80rem;   /* 1280 — the page default */
  --container-2xl: 90rem;   /* 1440 — wide media bands */
  --container-full: 100%;

  --container-gutter: clamp(1.25rem, 0.75rem + 2vw, 3rem);
  --container-width: var(--container-xl);

  --header-height: 76px;
  --header-height-compact: 62px;
  --header-height-mobile: 64px;
  --topbar-height: 40px;

  /* Breakpoints are documented here for reference. Media queries must use
     literal values — CSS custom properties are not valid inside @media. */
  --bp-xs:  380px;
  --bp-sm:  480px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1536px;

  /* Minimum interactive target — WCAG 2.5.8 / touch comfort */
  --tap-target: 44px;

  /* Formerly frosted-glass surfaces, now plain ones. The blur has gone; these
     remain as the opaque equivalents so anything referencing them still
     resolves to something sensible. */
  --glass-bg: var(--color-surface);
  --glass-bg-dark: var(--navy-900);
  --glass-border: var(--color-border);

  /* Aspect ratios used by media cards */
  --ratio-square: 1 / 1;
  --ratio-photo:  4 / 3;
  --ratio-video:  16 / 9;
  --ratio-wide:   21 / 9;
  --ratio-portrait: 3 / 4;
  --ratio-tall:   4 / 5;
}

/* --------------------------------------------------------------------------
   Dark surface context.
   Any subtree marked `data-theme="dark"` (hero bands, the footer, dark cards)
   re-points the semantic layer. Components need no dark-specific rules.
   -------------------------------------------------------------------------- */
[data-theme="dark"] {
  --color-background:      var(--navy-900);
  --color-background-alt:  var(--navy-950);
  --color-background-deep: #0b1226;
  --color-surface:         rgb(255 255 255 / 0.06);
  --color-surface-raised:  rgb(255 255 255 / 0.09);
  --color-surface-sunken:  rgb(0 0 0 / 0.18);
  --color-card:            rgb(255 255 255 / 0.06);

  --color-border:        rgb(255 255 255 / 0.14);
  --color-border-subtle: rgb(255 255 255 / 0.08);
  --color-border-strong: rgb(255 255 255 / 0.24);
  --color-divider:       rgb(255 255 255 / 0.1);

  --color-text-primary:   #ffffff;
  --color-text-secondary: rgb(255 255 255 / 0.74);
  --color-text-muted:     rgb(255 255 255 / 0.56);
  --color-text-inverse:   var(--navy-800);
  --color-text-link:      var(--blue-400);
  --color-text-link-hover: var(--blue-300);

  --color-primary:       var(--blue-600);
  --color-primary-hover: var(--blue-500);
  --color-primary-soft:  rgb(22 122 252 / 0.18);
  --color-secondary:     #ffffff;
  --color-on-secondary:  var(--navy-800);
  --color-secondary-soft: rgb(255 255 255 / 0.1);

  --color-hover-tint:  rgb(255 255 255 / 0.06);
  --color-active-tint: rgb(255 255 255 / 0.12);
  --color-disabled-bg: rgb(255 255 255 / 0.08);
  --color-disabled-fg: rgb(255 255 255 / 0.34);

  --color-danger-bg:  rgb(253 34 12 / 0.16);
  --color-danger-fg:  var(--red-300);
  --color-success-bg: rgb(15 163 107 / 0.16);
  --color-success-fg: #6fd7ac;
  --color-warning-bg: rgb(207 139 10 / 0.16);
  --color-warning-fg: #f2c766;
  --color-info-bg:    rgb(22 122 252 / 0.16);
  --color-info-fg:    var(--blue-300);

  --shadow-sm:  0 1px 2px rgb(0 0 0 / 0.3);
  --shadow-md:  0 4px 14px rgb(0 0 0 / 0.34);
  --shadow-lg:  0 12px 30px rgb(0 0 0 / 0.4);
  --shadow-xl:  0 24px 54px rgb(0 0 0 / 0.46);
  --shadow-ring: 0 0 0 1px rgb(255 255 255 / 0.08);

  --glass-bg: rgb(16 23 47 / 0.72);
  --glass-border: rgb(255 255 255 / 0.14);

  color-scheme: dark;
}

/* Density switch — a compact variant for data-dense screens (manage booking,
   search results). Opt in per subtree with `data-density="compact"`. */
[data-density="compact"] {
  --space-4: 0.875rem;
  --space-5: 1rem;
  --space-6: 1.25rem;
  --space-8: 1.625rem;
  --header-height: var(--header-height-compact);
}