/* Rocam Illuminated
   Colour, type, glow, shadow, radius, space, and motion tokens.
   Dark is the default workshop. Light is the daytime paper.
   Brand hex values are the flat fills measured on the logo file
   and the Elementor kit at rocamsigns.co.za (20 Oct 2026).
   See docs/design/BRAND.md. */

@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/oswald-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/oswald-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/montserrat-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/montserrat-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

  /* Brand — do not recolour */
  --rocam-red: #ed1c24;
  --rocam-blue: #254a9f;
  --rocam-ink: #232323;
  --rocam-white: #ffffff;
  --rocam-gray: #808080;
  --rocam-slate: #454545;
  --rocam-line: #e3e3e3;
  --rocam-mist: #f5f5f5;
  --rocam-paper: #fcfcfc;
  --rocam-card-line: #e4e4e4;
  --rocam-hero-copy: #ededed;
  --rocam-link-on-dark: #d9d9d9;

  /* White label on brand red is 4.38:1. This deeper fill is the same hue,
     used only when white button text must clear 4.5:1. Glow stays #ED1C24. */
  --rocam-red-deep: #c41218;

  /* Functional status hues. Not brand colours. */
  --status-ready: #1f8a5b;
  --status-ready-text: #8ee0b5;

  --font-display: "Oswald", "Arial Narrow", "Segoe UI", sans-serif;
  --font-sans: "Montserrat", "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-md: 0.9375rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --leading-body: 1.55;
  --leading-tight: 1.15;
  --tracking-sign: 0.14em;
  --tracking-tight: 0.04em;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 420ms;
  --duration-glow: 2.8s;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);

  --bg: #101214;
  --bg-atmosphere:
    radial-gradient(1280px 720px at 6% -20%, rgba(37, 74, 159, 0.46), transparent 56%),
    radial-gradient(920px 540px at 108% -12%, rgba(237, 28, 36, 0.2), transparent 48%),
    radial-gradient(780px 480px at 50% 118%, rgba(37, 74, 159, 0.14), transparent 52%),
    #101214;
  --surface: rgba(23, 27, 32, 0.74);
  --surface-solid: #171b20;
  --surface-raised: rgba(255, 255, 255, 0.045);
  --text: #f4f6f8;
  --text-secondary: #c5cdd8;
  --text-muted: #9aa3b2;
  --rocam-blue-text: #b7c9f2;
  --rocam-red-text: #ffb4b6;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --header: rgba(16, 18, 20, 0.8);
  --row-hover: rgba(255, 255, 255, 0.04);
  --input-bg: rgba(8, 10, 12, 0.45);
  --shadow-glass: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 22px 56px rgba(0, 0, 0, 0.4);
  --shadow-glow-blue: 0 0 0 1px rgba(37, 74, 159, 0.72), 0 0 36px rgba(37, 74, 159, 0.42);
  --shadow-glow-red: 0 0 0 1px rgba(237, 28, 36, 0.55), 0 0 26px rgba(237, 28, 36, 0.34);
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.28);
  --ring: 0 0 0 3px rgba(37, 74, 159, 0.45);
  --lamp: #254a9f;
  --table-line: rgba(255, 255, 255, 0.06);
  --badge-neutral-bg: rgba(154, 163, 178, 0.14);
  --badge-neutral-text: #c5cdd8;
  --badge-blue-bg: rgba(37, 74, 159, 0.28);
  --badge-blue-text: #d5e2ff;
  --badge-red-bg: rgba(237, 28, 36, 0.18);
  --badge-red-text: #ffc4c6;
  --badge-green-bg: rgba(31, 138, 91, 0.2);
  --badge-green-text: #b6f0d2;
  --sheet-shadow: 0 0 0 1px rgba(37, 74, 159, 0.25), 0 30px 80px rgba(0, 0, 0, 0.45), 0 0 60px rgba(37, 74, 159, 0.18);
}

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

  --status-ready-text: #0f5c38;

  --bg: #f5f5f5;
  --bg-atmosphere:
    radial-gradient(1100px 620px at 0% -14%, rgba(37, 74, 159, 0.12), transparent 56%),
    radial-gradient(860px 480px at 100% -6%, rgba(237, 28, 36, 0.06), transparent 50%),
    #f5f5f5;
  --surface: rgba(255, 255, 255, 0.96);
  --surface-solid: #ffffff;
  --surface-raised: rgba(37, 74, 159, 0.04);
  --text: #232323;
  --text-secondary: #454545;
  --text-muted: #5c6570;
  --rocam-blue-text: #254a9f;
  --rocam-red-text: #9e1218;
  --border: #e4e4e4;
  --border-strong: #d0d0d0;
  --header: rgba(252, 252, 252, 0.9);
  --row-hover: rgba(37, 74, 159, 0.045);
  --input-bg: #ffffff;
  --shadow-glass: inset 0 1px 0 #ffffff, 0 18px 44px rgba(35, 35, 35, 0.08);
  --shadow-glow-blue: 0 0 0 1px rgba(37, 74, 159, 0.32), 0 12px 32px rgba(37, 74, 159, 0.16);
  --shadow-glow-red: 0 0 0 1px rgba(237, 28, 36, 0.3), 0 10px 24px rgba(237, 28, 36, 0.12);
  --shadow-soft: 0 10px 28px rgba(35, 35, 35, 0.08);
  --ring: 0 0 0 3px rgba(37, 74, 159, 0.28);
  --lamp: #254a9f;
  --table-line: #e8e8e8;
  --badge-neutral-bg: #f0f0f0;
  --badge-neutral-text: #454545;
  --badge-blue-bg: #e7eefb;
  --badge-blue-text: #1d3f86;
  --badge-red-bg: #fdecee;
  --badge-red-text: #9e1218;
  --badge-green-bg: #e6f6ee;
  --badge-green-text: #0f5c38;
  --sheet-shadow: 0 16px 50px rgba(35, 35, 35, 0.12);
}