/* ==========================================================================
   Ramp design tokens — Glass Cockpit (Wave 3).
   Authoritative values: docs/design/master/glass-cockpit-tokens.md §7.
   Rules for USING these tokens: docs/design/master/design-standard.md.

   This file contains ONLY custom properties (plus the global reduced-motion
   override mandated by §6). Component classes live in components.css;
   @font-face rules live in fonts.css. Do not add other selectors here.

   SINGLE SOURCE OF TRUTH: the compiled Tailwind theme
   (frontend/tailwind.config.ts) and vanilla CSS (components.css) both consume
   these properties via var() — never by copied value. Re-theming = editing
   values here; the pipeline is value-independent by construction. Glass
   translucency is expressed ONLY through the explicit rgba glass tokens
   (Tailwind opacity modifiers cannot apply to var() colors).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Daylight (default) — :root / [data-theme="light"].
   -------------------------------------------------------------------------- */
:root,
[data-theme="light"] {
  /* §1 Typography — three self-hosted families (fonts.css). */
  --font-display: 'Manrope', var(--font-sans);
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Consolas, Menlo, monospace;

  --text-xs: 0.6875rem;   /* 11px — timestamps, metadata, ALLCAPS labels */
  --text-sm: 0.8125rem;   /* 13px — primary body, table cells, list rows */
  --text-base: 0.9375rem; /* 15px — subheadings, prominent values, inputs */
  --text-lg: 1.125rem;    /* 18px — section headings */
  --text-xl: 1.375rem;    /* 22px — large section display */
  --text-2xl: 1.75rem;    /* 28px — KPI metric callouts only */
  --text-display: 1.625rem; /* 26px — page title, Manrope 800 */

  --leading-heading: 1.25;
  --leading-table: 1.375;
  --leading-prose: 1.5;
  --tracking-heading: -0.01em; /* headings >= 18px */
  --tracking-display: -0.02em; /* 26px page titles */
  --tracking-caps: 0.08em;     /* ALLCAPS labels */

  /* §2 Spacing (4px base unit) */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px;

  /* §2 Radius — Glass Cockpit family */
  --radius-sm: 6px;     /* tags, small chip inner elements */
  --radius-md: 10px;    /* buttons, inputs, selects */
  --radius-lg: 16px;    /* cards, panels, verdict panel, banners */
  --radius-xl: 18px;    /* modals, drawers, the app frame */
  --radius-full: 9999px;

  /* Atmosphere + glass (theme-invariant; dusk swaps --atmo only) */
  --atmo: var(--atmo-app);
  --atmo-app: linear-gradient(160deg, #5D83B8 0%, #33567F 55%, #27425F 100%);
  --atmo-marketing: linear-gradient(160deg, #8DB4E2 0%, #5D83B8 45%, #33567F 100%);
  --atmo-dusk: linear-gradient(160deg, #33567F 0%, #24406B 50%, #1B2C4D 100%);
  --atmo-blob-1: rgba(238, 246, 255, 0.45);
  --atmo-blob-2: rgba(205, 224, 242, 0.38);
  --glass-surface: rgba(255, 255, 255, 0.12);
  --glass-surface-hi: rgba(255, 255, 255, 0.18);
  --glass-scrim: rgba(14, 31, 51, 0.45);
  --glass-scrim-hi: rgba(14, 31, 51, 0.55);
  /* Chrome panel — a deliberate deep-navy frosted band for the page-header,
     toolbar and footer. Richer + more opaque than the scrim so it reads as
     intentional dark glass over a pale atmosphere, NOT a washed grey block
     (W3 look-hotfix: white .12 over navy .45 muddied to grey on light pages). */
  --glass-panel: rgba(19, 38, 66, 0.72);
  --glass-panel-border: rgba(255, 255, 255, 0.14);
  --glass-border: rgba(255, 255, 255, 0.28);
  --glass-border-soft: rgba(255, 255, 255, 0.18);
  --glass-blur: 13px;
  --glass-blur-sm: 8px;
  --glass-solid: #516A8C;
  --glass-solid-hi: #576C89;
  --glass-chip-underlay: rgba(10, 24, 40, 0.50);
  --ink: #FFFFFF;
  --ink-2: #E6EFFA;
  --ink-3: #AAC2DC;

  /* Daylight data deck (the generic surface tokens components consume) */
  --color-bg:          #EEF4FA;   --color-bg-subtle:   #E4EDF6;
  --color-surface:     #FFFFFF;   --color-surface-2:   #F4F8FC;
  --color-border:        #E2E9F1; --color-border-strong: #C9D6E5;
  --color-text:           #15303F; --color-text-secondary: #4E6A84;
  --color-text-muted:     #6E8296; --color-text-inverse:   #FFFFFF;
  --color-action:        #14213D; --color-action-hover:  #0F1A30;
  --color-action-ink:    #FFFFFF;
  --color-link:          #1D5FA6; --color-focus:         #4F63D2;
  --color-focus-halo:    #FFFFFF;

  /* §5 Safety (sovereign) — daylight derivatives */
  --color-svc:   #157A3E;  --color-svc-bg:   #E3F6EC;
  --color-warn:  #8F6708;  --color-warn-bg:  #FBF1D7;
  --color-block: #B42B2B;  --color-block-bg: #FCE7E7;
  --color-info:  #1D5FA6;  --color-info-bg:  rgba(29, 95, 166, 0.08);
  --color-neutral: #4E6A84; --color-neutral-bg: rgba(21, 48, 63, 0.06);
  /* Core hues + dark-context derivatives (theme-invariant; used by glass
     components and the deep deck wherever it appears) */
  --svc:   #2FBF71;  --svc-ink:   #BDF5D6;  --svc-tint:   rgba(47, 191, 113, 0.20);
  --warn:  #F5C453;  --warn-ink:  #FFE6AE;  --warn-tint:  rgba(245, 196, 83, 0.24);
  --block: #FF6B6B;  --block-ink: #FFC4C4;  --block-tint: rgba(255, 107, 107, 0.24);

  /* §4 Decks (theme-invariant deep deck) */
  --deck: #27425F; --deck-2: #1F3550;
  --deck-grad: linear-gradient(180deg, #27425F 0%, #1F3550 100%);
  --deck-line: rgba(255, 255, 255, 0.10); --deck-line-soft: rgba(255, 255, 255, 0.05);
  --deck-cell: rgba(255, 255, 255, 0.04); --deck-cell-edge: rgba(255, 255, 255, 0.12);

  /* §6 Booking-block fills (AA-corrected from the render) */
  --fill-confirmed: linear-gradient(135deg, #336DB3, #2C5E9C);
  --fill-active:    linear-gradient(135deg, #21854F, #1A6B41);
  --fill-requested: rgba(255, 255, 255, 0.10);
}

/* --------------------------------------------------------------------------
   Dusk (the dark mode) — explicit user preference. The atmosphere deepens
   toward #1B2C4D; data surfaces become the deep deck. Server renders
   data-theme="dark" before paint: no flash. (Attribute name "dark" kept for
   back-compat with the Settings preference + SSR mechanism.)
   -------------------------------------------------------------------------- */
[data-theme="dark"] {
  --atmo: var(--atmo-dusk);
  --color-bg:          #1B2C4D;   --color-bg-subtle:   #16253F;
  --color-surface:     #27425F;   --color-surface-2:   #1F3550;
  --color-border:        rgba(255, 255, 255, 0.10);
  --color-border-strong: rgba(255, 255, 255, 0.18);
  --color-text:           #FFFFFF; --color-text-secondary: #E6EFFA;
  --color-text-muted:     #AAC2DC; --color-text-inverse:   #15303F;
  --color-action:        #FFFFFF; --color-action-hover:  #E6EFFA;
  --color-action-ink:    #1D3A5F;
  --color-link:          #FFFFFF; --color-focus:         #FFFFFF;
  --color-focus-halo:    #0E1F33;
  /* Safety — dark-context derivatives become the generic tokens */
  --color-svc:   var(--svc-ink);   --color-svc-bg:   var(--svc-tint);
  --color-warn:  var(--warn-ink);  --color-warn-bg:  var(--warn-tint);
  --color-block: var(--block-ink); --color-block-bg: var(--block-tint);
  --color-info:  #9CC4F5;          --color-info-bg:  rgba(96, 165, 250, 0.16);
  --color-neutral: #E6EFFA;        --color-neutral-bg: rgba(255, 255, 255, 0.08);
}

/* --------------------------------------------------------------------------
   Auto — user preference is `auto`, so the server emits NO data-theme
   attribute and the OS preference decides. This block duplicates
   [data-theme="dark"] (dusk) exactly; keep them in sync.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --atmo: var(--atmo-dusk);
    --color-bg:          #1B2C4D;   --color-bg-subtle:   #16253F;
    --color-surface:     #27425F;   --color-surface-2:   #1F3550;
    --color-border:        rgba(255, 255, 255, 0.10);
    --color-border-strong: rgba(255, 255, 255, 0.18);
    --color-text:           #FFFFFF; --color-text-secondary: #E6EFFA;
    --color-text-muted:     #AAC2DC; --color-text-inverse:   #15303F;
    --color-action:        #FFFFFF; --color-action-hover:  #E6EFFA;
    --color-action-ink:    #1D3A5F;
    --color-link:          #FFFFFF; --color-focus:         #FFFFFF;
    --color-focus-halo:    #0E1F33;
    --color-svc:   var(--svc-ink);   --color-svc-bg:   var(--svc-tint);
    --color-warn:  var(--warn-ink);  --color-warn-bg:  var(--warn-tint);
    --color-block: var(--block-ink); --color-block-bg: var(--block-tint);
    --color-info:  #9CC4F5;          --color-info-bg:  rgba(96, 165, 250, 0.16);
    --color-neutral: #E6EFFA;        --color-neutral-bg: rgba(255, 255, 255, 0.08);
  }
}

/* --------------------------------------------------------------------------
   Density modes — §2. Padding only, never font size.
   -------------------------------------------------------------------------- */
:root,
[data-density="standard"] {
  --row-h: 44px;      /* table/list rows — min tap target */
  --cell-py: 10px;
  --cell-px: 14px;
  --card-pad: 20px;
}

[data-density="compact"] {
  --row-h: 36px;
  --cell-py: 6px;
  --cell-px: 12px;
  --card-pad: 16px;
}

/* --------------------------------------------------------------------------
   Reduced motion — §6. Forces all transition/animation durations to
   effectively zero, app-wide (the atmosphere drift freezes; see
   components.css for the .atmo blob freeze).
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}