/* T.R.E.X. Facility Management — design tokens
 *
 * Taken from the design project "T.R.E.X." (Finanz-Leitstand.dc.html), file
 * _ds/t-r-e-x-facility-management-design-syste-.../colors_and_type.css.
 * The palette there is pixel-verified against the live site trex-fm.de.
 *
 * Two changes against the source, both deliberate:
 *
 * 1. Fonts are self-hosted. The original imports Rubik and Caveat from
 *    fonts.googleapis.com, which sends every visitor's IP address to Google on
 *    each page load. For a German company's internal tool that is a data
 *    protection liability with case law behind it (LG München I, 3 O 17493/20).
 *    The files sit in public/fonts/ and are served from our own host.
 *
 * 2. The Motion UI Kit aliases at the bottom. The design canvas remapped the
 *    kit's dark-first tokens onto this light palette in an inline <style>; that
 *    mapping is reproduced here so the three kit components we use land on
 *    T.R.E.X. colours rather than the kit's near-black defaults.
 */

/* ---------- Self-hosted fonts ---------- */
@font-face {
  font-family: 'Rubik';
  src: url('/fonts/Rubik.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url('/fonts/Roboto.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Caveat';
  src: url('/fonts/Caveat.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Brand colours (live site, pixel-verified) ---------- */
  --color-primary:        #159da9;  /* teal — buttons, links, accents */
  --color-secondary:      #56c1b9;  /* light teal — hover, gradient start */
  --color-primary-alt:    #35a88e;  /* gradient green, status ok */
  --color-primary-darken: #05213f;  /* deep navy — headings, dark panels */
  --color-primary-light:  #e6f6f7;  /* teal wash — tints, info chips */
  --color-heading-darken: #1e4873;  /* mid blue — sub-headings, link hover */
  --color-heading-light:  #33506c;  /* darkened body text on light ground */
  --color-ink:            #1c1c1c;
  --color-body:           #8e949e;  /* body grey */
  --color-border:         #e6eaef;
  --color-gray:           #f9f8f8;
  --color-gray-darken:    #9aaabb;
  --color-gray-light:     #cdd5dd;

  --fg-1: var(--color-primary-darken);
  --fg-2: var(--color-heading-light);
  --fg-3: var(--color-body);
  --fg-inverse: #ffffff;
  --fg-accent: var(--color-primary);

  --bg: #ffffff;
  --bg-alt: var(--color-gray);
  --surface: #ffffff;
  --border-color: var(--color-border);

  --grad-brand: linear-gradient(120deg, #159da9 0%, #35a88e 100%);
  --grad-logo:  linear-gradient(90deg, #56c1b9 0%, #159da9 100%);

  --status-ok:    var(--color-primary-alt);
  --status-warn:  #f5a623;
  --status-fault: #d94a38;
  --status-info:  var(--color-primary);

  /* Readable text tones for status chips — the raw status colours above do not
     carry enough contrast against their own tints for small type. */
  --status-ok-ink:    #1d7a62;
  --status-warn-ink:  #8a5a0b;
  --status-fault-ink: #a8331e;
  --status-ok-bg:     #e3f4ef;
  --status-warn-bg:   #fcefd5;
  --status-fault-bg:  #fbe1dd;

  /* ---------- Type ---------- */
  --font-display: 'Rubik', system-ui, sans-serif;
  --font-body:    'Roboto', system-ui, -apple-system, Arial, sans-serif;
  --font-script:  'Caveat', cursive;
  --font-mono:    'SF Mono', Menlo, Consolas, monospace;

  --fs-xs: 12px;  --fs-sm: 14px;  --fs-base: 15px; --fs-md: 17px;
  --fs-lg: 20px;  --fs-xl: 24px;  --fs-2xl: 32px;  --fs-3xl: 44px;

  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
  --lh-display: 1.15; --lh-tight: 1.25; --lh-body: 1.65;

  /* ---------- Spacing (8-pt) ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px;

  /* ---------- Radii — small, technical. No pills except status chips. ------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-1: 0 2px 8px rgba(5, 33, 63, .06);
  --shadow-2: 0 8px 24px rgba(5, 33, 63, .10);
  --shadow-3: 0 16px 40px rgba(5, 33, 63, .14);

  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --duration-micro: 150ms;
  --duration-component: 250ms;
  --duration-panel: 400ms;

  /* ---------- Motion UI Kit aliases ----------
     The kit's Button and ProgressBar read these names. Mapping them here is
     what turns a dark-first kit into a T.R.E.X.-coloured one without touching
     the components. */
  --surface-1: #ffffff;
  --surface-2: #f0f2f5;
  --surface-3: #e6eaef;
  --text-1: var(--fg-1);
  --text-2: var(--fg-2);
  --border-1: var(--color-border);
  --border-2: var(--color-gray-light);
  --accent: var(--color-primary);
  --accent-hover: #107882;
  --accent-press: #0c5a61;
  --on-accent: #ffffff;
  --radius-full: var(--radius-pill);
  --duration-instant: 100ms;
  --duration-fast: var(--duration-micro);
  --duration-slow: 500ms;
  --ease-out: var(--ease-standard);
}