/* Service Air design tokens.
 *
 * The visual system is modelled on aviation technical documentation - pilot's operating
 * handbook tables, placards and dimension callouts - rather than on marketing collateral.
 * Numbers are the subject matter, so they are set in tabular figures and given room.
 *
 * Colour contrast is recorded against the surface each token is meant for. Anything used
 * for body text meets WCAG 2.2 AA (4.5:1); anything used only for large text, icons or
 * borders meets 3:1. See docs/brand-guide.md.
 */

:root {
  /* ---------------------------------------------------------------- brand palette */
  /* Documented brand values from Resources/Brand/service-air-logo-notes.md.
     Every ratio in this file is measured, not estimated. ContrastTests in
     tests/ServiceAir.Web.Tests parses this file and re-checks each pairing, so a
     token edit that breaks AA fails the build rather than shipping quietly. */
  --sa-navy: #082b50; /* 14.3:1 on white */
  --sa-teal: #00899a; /*  4.2:1 on white - large text, icons and graphics only */

  /* Navy ramp, for dark surfaces and scrims. */
  --sa-navy-950: #04162b;
  --sa-navy-900: #082b50;
  --sa-navy-800: #0e3a68;
  --sa-navy-700: #154b81;
  --sa-navy-600: #1d5e9c;

  /* Teal ramp. 700 and 800 are the text-safe accents. */
  --sa-teal-300: #7ad4de;
  --sa-teal-400: #3fbecb; /* 6.4:1 on navy-900 - the reversed-logo accent */
  --sa-teal-500: #16a2b3;
  --sa-teal-600: #00899a;
  --sa-teal-700: #05707e; /*  5.8:1 on white - links, accent text */
  --sa-teal-800: #05616e; /*  7.1:1 on white - accent text on tinted surfaces */

  /* Cool neutral ramp. Deliberately cool: warm greys read as editorial, not technical. */
  --sa-grey-50: #f6f8fa;
  --sa-grey-100: #eef1f5;
  --sa-grey-200: #dfe4ea;
  --sa-grey-300: #c6cfd9;
  --sa-grey-400: #8291a2; /* 3.2:1 on white, 3.0:1 on grey-50 - control outlines */
  --sa-grey-500: #5f6d7b; /* 5.3:1 on white, 5.0:1 on grey-50 - lightest AA body text */
  --sa-grey-600: #4c5865;
  --sa-grey-700: #3d4954; /*  9.2:1 on white - secondary body text */
  --sa-grey-800: #2a333c;
  --sa-grey-900: #1a2128;

  --sa-white: #ffffff;

  /* ------------------------------------------------------------ semantic surfaces */
  --sa-surface: var(--sa-white);
  --sa-surface-sunken: var(--sa-grey-50);
  --sa-surface-raised: var(--sa-white);
  --sa-surface-inverse: var(--sa-navy-900);
  --sa-surface-inverse-deep: var(--sa-navy-950);

  --sa-text: var(--sa-grey-900);
  --sa-text-secondary: var(--sa-grey-700);
  --sa-text-muted: var(--sa-grey-500);
  --sa-text-inverse: var(--sa-white);
  --sa-text-inverse-secondary: #b9c6d4; /* 8.2:1 on navy-900 */

  /* Two border roles, because they answer to different rules. --sa-border and
     --sa-border-strong are decorative dividers, which WCAG does not hold to a ratio.
     --sa-border-control outlines inputs, checkboxes and select boxes, which are
     meaningful UI component boundaries and must reach 3:1 (WCAG 2.2 AA, 1.4.11). */
  --sa-border: var(--sa-grey-200);
  --sa-border-strong: var(--sa-grey-300);
  --sa-border-control: var(--sa-grey-400); /* 3.2:1 on white, 3.0:1 on grey-50 */
  --sa-border-inverse: #1e4470;

  --sa-accent: var(--sa-teal-700);
  --sa-accent-surface: #e6f4f6;
  --sa-accent-on-dark: var(--sa-teal-400);

  /* ------------------------------------------------------------- pricing statuses */
  /* Price status is a first-class product concept, not a cosmetic badge: an unknown
     price is never rendered as zero. Each status therefore gets its own token pair. */
  --sa-status-included: #0f6b4f; /* 6.5:1 on white, 5.7:1 on its own surface */
  --sa-status-included-surface: #e4f4ee;
  --sa-status-priced: var(--sa-navy-800); /* 10.2:1 on grey-100 */
  --sa-status-priced-surface: var(--sa-grey-100);
  --sa-status-quote: #8a4b00; /* 6.8:1 on white, 6.1:1 on its own surface */
  --sa-status-quote-surface: #fdf1e0;
  --sa-status-unavailable: var(--sa-grey-500);
  --sa-status-unavailable-surface: var(--sa-grey-100);

  --sa-danger: #b3261e; /* 6.5:1 on white, 5.7:1 on its own surface */
  --sa-danger-surface: #fdecea;
  --sa-success: var(--sa-status-included);
  --sa-success-surface: var(--sa-status-included-surface);
  --sa-warning: var(--sa-status-quote);
  --sa-warning-surface: var(--sa-status-quote-surface);

  /* ------------------------------------------------------------------- typography */
  /* Inter carries Latin and Cyrillic; Noto Sans Georgian carries Georgian. Listing both
     lets the browser resolve per character, so Georgian never falls back to a system
     face that happens to be installed. */
  --sa-font-sans:
    "Inter", "Noto Sans Georgian", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sa-font-mono:
    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Major-third-ish scale, fluid where it is used for display type. */
  --sa-text-2xs: 0.6875rem; /* 11px - units, footnotes */
  --sa-text-xs: 0.75rem; /* 12px */
  --sa-text-sm: 0.875rem; /* 14px */
  --sa-text-base: 1rem; /* 16px */
  --sa-text-md: 1.0625rem; /* 17px - long-form body */
  --sa-text-lg: clamp(1.125rem, 0.2vw + 1.08rem, 1.25rem);
  --sa-text-xl: clamp(1.375rem, 0.6vw + 1.25rem, 1.625rem);
  --sa-text-2xl: clamp(1.75rem, 1.2vw + 1.45rem, 2.25rem);
  --sa-text-3xl: clamp(2.125rem, 2.2vw + 1.6rem, 3rem);
  --sa-text-4xl: clamp(2.5rem, 4vw + 1.5rem, 4rem);

  --sa-weight-regular: 400;
  --sa-weight-medium: 500;
  --sa-weight-semibold: 600;
  --sa-weight-bold: 700;

  --sa-leading-tight: 1.12;
  --sa-leading-snug: 1.3;
  --sa-leading-normal: 1.55;
  --sa-leading-relaxed: 1.7;

  /* Large type is tracked in, small type is tracked out - standard optical correction. */
  --sa-tracking-display: -0.025em;
  --sa-tracking-heading: -0.015em;
  --sa-tracking-normal: 0;
  --sa-tracking-wide: 0.02em;

  /* Comfortable measure. Prose stays under ~70 characters. */
  --sa-measure: 68ch;
  --sa-measure-narrow: 52ch;

  /* ---------------------------------------------------------------------- spacing */
  --sa-space-1: 0.25rem;
  --sa-space-2: 0.5rem;
  --sa-space-3: 0.75rem;
  --sa-space-4: 1rem;
  --sa-space-5: 1.5rem;
  --sa-space-6: 2rem;
  --sa-space-7: 3rem;
  --sa-space-8: 4rem;
  --sa-space-9: 6rem;
  --sa-space-10: 8rem;

  /* Vertical rhythm between major page sections, tighter on small screens. */
  --sa-section-y: clamp(3rem, 6vw, 6rem);
  --sa-section-y-lg: clamp(4rem, 9vw, 8rem);

  /* ---------------------------------------------------------------------- layout */
  --sa-container: 75rem; /* 1200px */
  --sa-container-wide: 87.5rem; /* 1400px - full-bleed media rails */
  --sa-gutter: clamp(1rem, 4vw, 2.5rem);

  /* ----------------------------------------------------------- radii and elevation */
  /* Small and varied by role. A single radius on every element is the tell of a
     component kit; sheet metal and placards are not pill shaped. */
  --sa-radius-sm: 3px; /* data cells, chips */
  --sa-radius-md: 6px; /* inputs, buttons */
  --sa-radius-lg: 10px; /* panels, cards */
  --sa-radius-full: 999px;

  --sa-shadow-sm: 0 1px 2px rgb(8 43 80 / 0.06), 0 1px 1px rgb(8 43 80 / 0.04);
  --sa-shadow-md: 0 2px 4px rgb(8 43 80 / 0.06), 0 6px 16px rgb(8 43 80 / 0.08);
  --sa-shadow-lg: 0 8px 24px rgb(8 43 80 / 0.1), 0 2px 6px rgb(8 43 80 / 0.06);
  --sa-shadow-inverse: 0 8px 28px rgb(2 10 20 / 0.45);

  /* ----------------------------------------------------------------------- motion */
  /* Motion answers an action - a step change, a recalculated price. There are no
     scroll-triggered entrance animations anywhere in this system. */
  --sa-duration-fast: 90ms;
  --sa-duration: 160ms;
  --sa-duration-slow: 260ms;
  --sa-ease: cubic-bezier(0.2, 0, 0.1, 1);
  --sa-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --sa-focus-ring: 0 0 0 2px var(--sa-white), 0 0 0 4px var(--sa-teal-700);
  --sa-focus-ring-inverse: 0 0 0 2px var(--sa-navy-900), 0 0 0 4px var(--sa-teal-400);

  --sa-z-header: 100;
  --sa-z-dropdown: 200;
  --sa-z-overlay: 900;
  --sa-z-modal: 1000;
}

/* Georgian has no case distinction and a larger apparent x-height relative to its
   ascenders; at a shared font-size it sets visually smaller and tighter than Latin.
   Cyrillic words run longer than their English equivalents and need looser wrapping. */
:lang(ka) {
  --sa-leading-tight: 1.24;
  --sa-leading-snug: 1.42;
  --sa-leading-normal: 1.68;
  --sa-leading-relaxed: 1.8;
  --sa-tracking-display: -0.01em;
  --sa-tracking-heading: 0;
  --sa-measure: 60ch;
}

:lang(ru) {
  --sa-tracking-display: -0.02em;
  --sa-measure: 64ch;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --sa-duration-fast: 1ms;
    --sa-duration: 1ms;
    --sa-duration-slow: 1ms;
  }
}