/* =========================================================================
   JobSteward — Design Tokens (CSS custom properties)
   Editorial-light structure · cabin-steward aviation livery (navy/white/gold)
   v2.1.0 · 2026-07-10 · Generated from tokens.json — edit that file first.
   Synced verbatim from the JobSteward design system. Do not hand-edit.
   ========================================================================= */

:root {
  color-scheme: light;

  /* ---- Color: surfaces ---- */
  --c-cloud:            #F6F8FB;
  --c-surface:          #FFFFFF;
  --c-surface-sunken:   #EEF2F7;

  /* ---- Color: navy (brand + functional accent) ---- */
  --c-navy-deep:        #0D2440;
  --c-navy:             #123152;
  --c-navy-hover:       #0E2742;
  --c-navy-wash:        #EAF0F7;

  /* ---- Color: ink + lines ---- */
  --c-ink:              #1B2B3A;
  --c-ink-secondary:    #4B586A;
  --c-ink-muted:        #616B7A;
  --c-hairline:         #DDE4EC;
  --c-hairline-strong:  #C7D1DE;

  /* ---- Color: gold (heritage accent — decorative, not text) ---- */
  --c-gold:             #D8A11F;
  --c-gold-bright:      #E8B94A;
  --c-gold-deep:        #B5851A;   /* only for display type >=24px */
  --c-gold-wash:        #FBF2DC;

  --c-focus-ring:       #123152;
  --c-on-navy:          #FFFFFF;   /* text on navy / accent fills */

  /* ---- Color: status (text passes AA on matching wash) ---- */
  --c-status-neutral:   #5A6371;
  --c-status-info:      #2F5E8C;
  --c-status-active:    #123152;
  --c-status-warning:   #8A5D16;
  --c-status-positive:  #2F6B4E;
  --c-status-negative:  #A33B3B;
  --c-status-neutral-wash:  #EEF1F5;
  --c-status-info-wash:     #E7EEF6;
  --c-status-active-wash:   #EAF0F7;
  --c-status-warning-wash:  #F4EEDF;
  --c-status-positive-wash: #E8F1EC;
  --c-status-negative-wash: #F6E9E9;

  /* ---- Brand: the gold braid motif ---- */
  --braid: repeating-linear-gradient(-20deg,
              var(--c-gold) 0 5.75px,
              var(--c-gold-bright) 6.25px 6.75px,
              transparent 7.25px 11.75px,
              var(--c-navy) 12.25px 16.75px,
              transparent 17.25px 18px);

  /* ---- Typography ---- */
  --font-display: 'Newsreader Variable', 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-text:    'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --numeral:      'tnum' 1; /* @kind other */

  --t-display-xl: 40px;  --t-display-xl-lh: 44px;
  --t-h1:         31px;  --t-h1-lh:         36px;
  --t-h2:         25px;  --t-h2-lh:         31px;
  --t-h3:         20px;  --t-h3-lh:         26px;
  --t-body-lg:    18px;  --t-body-lg-lh:    28px;
  --t-body:       15px;  --t-body-lh:       23px;
  --t-body-sm:    13px;  --t-body-sm-lh:    19px;
  --t-label:      11px;  --t-label-lh:      14px;  --t-label-tracking: 0.06em;
  --t-mono-sm:    13px;  --t-mono-sm-lh:    20px;

  /* ---- Spacing (4px grid) ---- */
  --s-0: 0px;  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  /* ---- Radius ---- */
  --r-none: 0px; --r-sm: 2px; --r-md: 4px; --r-lg: 8px; --r-tile: 12px; --r-tag: 999px;

  /* ---- Border widths ---- */
  --b-hairline: 1px; --b-strong: 1.5px; --b-focus: 2px;

  /* ---- Elevation (navy-tinted) ---- */
  --e-flat:    none; /* @kind shadow */
  --e-raised:  0 1px 2px rgba(13,36,64,0.07);
  --e-overlay: 0 8px 24px rgba(13,36,64,0.14);
  --e-modal:   0 16px 48px rgba(13,36,64,0.20);

  /* ---- Layout ---- */
  --l-content-max: 1200px;
  --l-reading-max: 680px;
  --l-sidebar:     232px;
  --l-rail-slim:   56px;
  --l-gutter:      32px;
  --l-touch:       44px;

  /* ---- Motion ---- */
  --d-instant: 80ms; /* @kind other */
  --d-fast: 140ms; /* @kind other */
  --d-base: 200ms; /* @kind other */
  --d-slow: 280ms; /* @kind other */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --ease-enter:    cubic-bezier(0, 0, 0, 1); /* @kind other */
  --ease-exit:     cubic-bezier(0.3, 0, 1, 1); /* @kind other */
  --move-nudge: 2px; --move-slide: 8px;
}

@media (max-width: 767px) { :root { --l-gutter: 16px; } }

/* -------------------------------------------------------------------------
   Dark theme — night livery (v2.1 extension; mirrored in tokens.json).
   Same discipline: gold stays decorative; the functional accent lightens to
   a steward blue so links/buttons/focus hold AA on deep-navy surfaces.
   Applied via <html data-theme="dark"> by the app's theme controller.
   ------------------------------------------------------------------------- */
[data-theme="dark"] {
  color-scheme: dark;

  /* Surfaces */
  --c-cloud:            #0B1622;
  --c-surface:          #12202F;
  --c-surface-sunken:   #0E1927;

  /* Navy → steward blue (functional accent flips light for contrast) */
  --c-navy-deep:        #0A1B30;
  --c-navy:             #8FB6E0;
  --c-navy-hover:       #A9C9EB;
  --c-navy-wash:        #1A2C40;
  --c-on-navy:          #0E1D30;

  /* Ink + lines */
  --c-ink:              #D9E2EC;
  --c-ink-secondary:    #A3B1C2;
  --c-ink-muted:        #7C8A9C;
  --c-hairline:         #24354A;
  --c-hairline-strong:  #33475F;

  /* Gold — the livery holds on night navy */
  --c-gold:             #D8A11F;
  --c-gold-bright:      #E8B94A;
  --c-gold-deep:        #E0B04C;
  --c-gold-wash:        #2E2714;

  --c-focus-ring:       #8FB6E0;

  /* Status roles (light ink on deep wash, AA) */
  --c-status-neutral:   #9AA5B3;
  --c-status-info:      #7FAEDC;
  --c-status-active:    #8FB6E0;
  --c-status-warning:   #D9AE55;
  --c-status-positive:  #7FBE9A;
  --c-status-negative:  #E08E8E;
  --c-status-neutral-wash:  #1D2836;
  --c-status-info-wash:     #14283C;
  --c-status-active-wash:   #1A2C40;
  --c-status-warning-wash:  #2E2712;
  --c-status-positive-wash: #15291F;
  --c-status-negative-wash: #331B1B;

  /* Braid keeps a true-navy stripe (--c-navy is light here) */
  --braid: repeating-linear-gradient(-20deg,
              var(--c-gold) 0 5.75px,
              var(--c-gold-bright) 6.25px 6.75px,
              transparent 7.25px 11.75px,
              #4A6C93 12.25px 16.75px,
              transparent 17.25px 18px);

  /* Elevation deepens on dark */
  --e-raised:  0 1px 2px rgba(0,0,0,0.40);
  --e-overlay: 0 8px 24px rgba(0,0,0,0.50);
  --e-modal:   0 16px 48px rgba(0,0,0,0.60);
}

/* -------------------------------------------------------------------------
   Base element defaults
   ------------------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--c-cloud);
  color: var(--c-ink);
  font-family: var(--font-text);
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

table, .num, [data-numeric] { font-feature-settings: var(--numeral); }

h1, .t-h1 { font-family: var(--font-display); font-size: var(--t-h1); line-height: var(--t-h1-lh); font-weight: 400; letter-spacing: -0.01em; color: var(--c-navy); margin: 0; }
h2, .t-h2 { font-family: var(--font-display); font-size: var(--t-h2); line-height: var(--t-h2-lh); font-weight: 500; color: var(--c-navy); margin: 0; }
h3, .t-h3 { font-family: var(--font-text);    font-size: var(--t-h3); line-height: var(--t-h3-lh); font-weight: 600; margin: 0; }

.t-label {
  font-size: var(--t-label); line-height: var(--t-label-lh);
  letter-spacing: var(--t-label-tracking); text-transform: uppercase;
  font-weight: 600; color: var(--c-ink-muted);
}

a { color: var(--c-navy); text-decoration: none; }
a:hover { color: var(--c-navy-hover); text-decoration: underline; text-underline-offset: 2px; }

:focus-visible { outline: var(--b-focus) solid var(--c-focus-ring); outline-offset: 2px; }

/* ---- The braid: signature motif helpers ---- */
.braid-rule { height: 4px; border-radius: 2px; background: var(--braid); }
.braid-mark { /* container for the app mark; see brand/ SVGs */ }

/* -------------------------------------------------------------------------
   Quiet micro-interactions
   ------------------------------------------------------------------------- */
.interactive { transition:
  background-color var(--d-fast) var(--ease-standard),
  border-color     var(--d-fast) var(--ease-standard),
  transform        var(--d-fast) var(--ease-standard),
  box-shadow       var(--d-fast) var(--ease-standard); }
.interactive:hover  { transform: translateY(calc(-1 * var(--move-nudge))); box-shadow: var(--e-raised); }
.interactive:active { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}