/* Surftec design tokens — Surftec Development Standards 1.4
   Canonical source: 01-brand.md (colours) and 02-admin-ui-design-language.md (spacing).
   Copy this file into every project unchanged; override nothing here, extend in the product's own CSS. */
:root {
  /* Brand colour ways (Brand Book 2020) */
  --midnight: #2F4550;
  --teal:     #298094;
  --sea:      #3EBACE;
  --mint:     #B8DBD9;
  /* UI tints */
  --ground:   #EEF5F5;
  --text:     #22343C;
  --muted:    #5E7079;
  --line:     #DCE7E7;
  --danger:   #B3261E;
  --ok:       #12803C;
  /* Paper: printed sheets, posters and previews of them keep these in the dark theme (1.4, S-13) */
  --paper:         #FFFFFF;
  --paper-text:    #22343C;
  --paper-muted:   #5E7079;
  --paper-heading: #2F4550;
  /* Gradients (stops match the master logo files) */
  --grad:        linear-gradient(90deg, #3EBACE, #297F93);   /* UI: buttons, header underline */
  --grad-diag:   linear-gradient(135deg, #3EBACE, #297F93);  /* decorative, logo direction */
  --grad-mint:   linear-gradient(135deg, #B8DBD9, #298094);  /* secondary, decorative only */
  /* Signal colours — operational displays only (D-BR-01) */
  --sig-go:      #1C5FC4;
  --sig-working: #12803C;
  --sig-leave:   #6B2D9B;
  --sig-stop:    #C8102E;
  --sig-caution: #F2A900; /* always black text */
  --sig-neutral: #23404F;
  --sig-paused:  #58616B;
  /* Type */
  --font-ui:      'Raleway', system-ui, 'Segoe UI', Arial, sans-serif;
  --font-display: 'Bahnschrift', 'DIN Alternate', 'Segoe UI', Arial, sans-serif;
  --font-mono:    ui-monospace, Consolas, monospace;
  /* Spacing and shape (D-UI-02) */
  --gap: 14px; --gap-tight: 8px; --pad-card: 18px; --pad-box: 14px;
  --r-card: 18px; --r-box: 14px; --r-control: 12px; --r-pill: 999px;
  --head-card: 56px; --head-box: 46px; --control-h: 44px;
  /* Breakpoints (documented here; CSS can't use vars in media queries):
     phone < 600px · tablet 600–999px · desktop >= 1000px */
}
@media (max-width: 599px) { :root { --pad-card: 12px; --pad-box: 10px; --gap: 12px; } }
*, *::before, *::after { box-sizing: border-box; }