/* ==========================================================================
   SUN Liner Portal - design tokens.

   The whole palette lives here, as custom properties. Light is the default on
   :root; dark redefines ONLY the token values under [data-theme="dark"].

   Nothing else in the application names a colour. A rule that writes a hex
   value instead of a token breaks the dark theme, because only the values
   below are swapped when the theme changes.

   Brand: the blue and orange of the SUN Liner mark.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Brand blue */
  --sl-blue-900: #0B2942;
  --sl-blue-800: #0F3A5C;
  --sl-blue-700: #14466F;
  --sl-blue-600: #1B5C8F;
  --sl-blue-500: #2D7AB5;
  --sl-blue-300: #8FBBDA;
  --sl-blue-100: #D3E5F3;
  --sl-blue-050: #E8F1F8;

  /* Brand orange */
  --sl-orange-700: #A94E08;
  --sl-orange-600: #C25F0D;
  --sl-orange-500: #E0761B;
  --sl-orange-400: #F29A3F;
  --sl-orange-300: #F3B274;
  --sl-orange-050: #FDF0E2;

  /* Surfaces - neutrals biased slightly blue so they sit with the brand */
  --sl-ground: #EEF2F7;
  --sl-surface: #FFFFFF;
  --sl-surface-raised: #F7FAFC;
  --sl-surface-sunken: #E9EFF5;
  --sl-header: #FFFFFF;
  --sl-subbar: linear-gradient(90deg, #14466F 0%, #1B5C8F 60%, #2D7AB5 100%);
  --sl-subbar-ink: #FFFFFF;
  --sl-sidebar: #F4F7FB;
  --sl-overlay: rgb(11 41 66 / 45%);

  /* Text */
  --sl-heading: #0F3A5C;
  --sl-link: #1B5C8F;
  --sl-ink: #0D1C28;
  --sl-ink-muted: #3C5468;
  --sl-ink-subtle: #6C8398;
  --sl-ink-on-accent: #FFFFFF;

  /* Lines */
  --sl-line: #D6E0EA;
  --sl-line-soft: #E6EDF3;

  /* Semantic - separate from the brand accent on purpose */
  --sl-ok: #1C7A4F;
  --sl-warn: #9A6206;
  --sl-stop: #A33224;
  --sl-ok-soft: #E6F4EC;
  --sl-warn-soft: #FBF1DF;
  --sl-stop-soft: #FBEAE7;

  /* Elevation */
  --sl-shadow-1: 0 1px 2px rgb(11 41 66 / 6%), 0 8px 24px rgb(11 41 66 / 8%);
  --sl-shadow-2: 0 2px 4px rgb(11 41 66 / 8%), 0 18px 48px rgb(11 41 66 / 16%);
  --sl-shadow-accent: 0 6px 18px rgb(224 118 27 / 28%);

  /* Type */
  --sl-font-body: "Segoe UI", system-ui, -apple-system, sans-serif;
  --sl-font-mono: "Cascadia Mono", Consolas, ui-monospace, monospace;

  /* Metrics - change once to retune density on every screen */
  --sl-radius-sm: 8px;
  --sl-radius: 12px;
  --sl-radius-lg: 18px;
  --sl-radius-pill: 999px;
  --sl-header-height: 60px;
  --sl-subbar-height: 30px;
  --sl-footer-height: 28px;
  --sl-sidebar-width: 290px;
  --sl-transition: 160ms ease;
}

[data-theme="dark"] {
  color-scheme: dark;

  --sl-heading: #DCE8F2;
  --sl-link: #7FB6E0;

  --sl-blue-900: #0F3552;
  --sl-blue-800: #174A73;
  --sl-blue-700: #1E5C8C;
  --sl-blue-600: #2A74AC;
  --sl-blue-500: #4E9AD0;
  --sl-blue-300: #2E5F86;
  --sl-blue-100: #16324A;
  --sl-blue-050: #10283C;

  --sl-orange-700: #F3B274;
  --sl-orange-600: #F09A45;
  --sl-orange-500: #F08A2E;
  --sl-orange-400: #F4A355;
  --sl-orange-300: #8A5226;
  --sl-orange-050: #2A1A0A;

  --sl-ground: #07141E;
  --sl-surface: #0E212F;
  --sl-surface-raised: #13293A;
  --sl-surface-sunken: #0A1A26;
  --sl-header: #0B1C29;
  --sl-subbar: linear-gradient(90deg, #0A2238 0%, #123452 60%, #1A4468 100%);
  --sl-subbar-ink: #E3ECF3;
  --sl-sidebar: #0B1C29;
  --sl-overlay: rgb(0 0 0 / 60%);

  --sl-ink: #E3ECF3;
  --sl-ink-muted: #A9BECE;
  --sl-ink-subtle: #7C93A6;

  --sl-line: #1E384C;
  --sl-line-soft: #172D3E;

  --sl-ok: #4CAF7D;
  --sl-warn: #D5A050;
  --sl-stop: #E0705E;
  --sl-ok-soft: #102A20;
  --sl-warn-soft: #2A2110;
  --sl-stop-soft: #2C1715;

  --sl-shadow-1: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px rgb(0 0 0 / 40%);
  --sl-shadow-2: 0 2px 4px rgb(0 0 0 / 50%), 0 18px 48px rgb(0 0 0 / 55%);
  --sl-shadow-accent: 0 6px 18px rgb(240 138 46 / 22%);
}

/* ---- Document ----------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--sl-ground);
  color: var(--sl-ink);
  font-family: var(--sl-font-body);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--sl-link);
}

h1:focus {
  outline: none;
}

.sl-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}