/* ============================================================================
   SMART SUITE — DESIGN TOKENS
   Theme: "Perimeter & Signal"
   ----------------------------------------------------------------------------
   READ THIS BEFORE BUILDING ANY NEW PAGE.

   This file is the single source of truth for colour, type, space, radius,
   elevation and timing. Every other stylesheet and every page must consume
   these variables. Never hard-code a hex value, px font-size, or ms duration
   in a page file — if a value is missing here, ADD IT here first.

   THEME CONCEPT
   The five Smart Suite products all enforce a boundary that intelligence
   watches: a geofence (CamBlocker), a consent boundary (OVSE), an admin scope
   (AI Agent), a presence boundary (CCTV Attendance), a session boundary
   (Workforce). So the whole visual language is: dark instrument-grade
   perimeters, a teal "pulse" for live/verified states, and a single amber
   "signal" for action. Amber is the only colour allowed on primary CTAs.

   SURFACE RHYTHM (important for page composition)
   Pages alternate dark → light → dark. Dark sections carry the atmosphere and
   animated backgrounds; light sections carry dense reading content. Never
   place two dark sections adjacent without a light section between them,
   except hero → trust bar.
   ============================================================================ */

:root {
  /* --------------------------------------------------------------------
     1. CORE PALETTE
     Use semantic aliases (section 2) in components wherever possible.
     -------------------------------------------------------------------- */
  --c-void: #061420;         /* deepest background — hero, footer */
  --c-deep: #0B1F33;         /* primary dark surface — dark sections, brand ink */
  --c-deep-2: #12314C;       /* raised dark surface — cards on dark */
  --c-slate: #24455F;        /* dark borders / dividers on dark */

  --c-paper: #FFFFFF;        /* light surface — cards, forms */
  --c-wash: #F2F6F9;         /* light section background */
  --c-wash-2: #E7EEF3;       /* alternate light band */
  --c-line: #D6E1EA;         /* light borders */

  --c-signal: #FFC53D;       /* AMBER — primary action. CTA only. */
  --c-signal-deep: #E09400;  /* amber pressed/hover, and amber on light bg */
  --c-pulse: #29C4B0;        /* TEAL — live, verified, active, accents */
  --c-pulse-deep: #0E8F80;   /* teal on light backgrounds (contrast safe) */
  --c-alert: #E5484D;        /* errors only */

  /* --------------------------------------------------------------------
     2. SEMANTIC TEXT COLOURS
     `-on-dark` variants are for dark sections, plain ones for light sections.
     -------------------------------------------------------------------- */
  --t-strong: #0B1F33;              /* headings on light */
  --t-body: #3A4E60;                /* body copy on light */
  --t-muted: #667C8E;               /* secondary copy on light */
  --t-strong-on-dark: #FFFFFF;
  --t-body-on-dark: rgba(233, 242, 248, 0.80);
  --t-muted-on-dark: rgba(203, 219, 231, 0.62);

  /* --------------------------------------------------------------------
     3. GRADIENTS & ATMOSPHERE
     Used by animations.css. Do not invent new gradients per page.
     -------------------------------------------------------------------- */
  --g-signal: linear-gradient(135deg, #FFC53D 0%, #F0A81C 100%);
  --g-pulse: linear-gradient(135deg, #29C4B0 0%, #0E8F80 100%);
  --g-deep: linear-gradient(180deg, #0B1F33 0%, #061420 100%);
  --g-scrim: linear-gradient(180deg, rgba(6,20,32,.35) 0%, rgba(6,20,32,.72) 55%, rgba(6,20,32,.96) 100%);

  /* --------------------------------------------------------------------
     4. TYPOGRAPHY
     Display = Sora (geometric, engineered). Body = Manrope (humanist, legible).
     Mono = JetBrains Mono, used ONLY for eyebrows, labels, and data chips.
     Never use mono for body copy. Never introduce a 4th family.
     -------------------------------------------------------------------- */
  --f-display: "Sora", "Segoe UI", system-ui, sans-serif;
  --f-body: "Manrope", system-ui, -apple-system, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* Fluid type scale — clamp(min, preferred, max). Mobile-first by design. */
  --fs-hero: clamp(2.75rem, 9vw, 6rem);       /* hero brand line only */
  --fs-h1: clamp(2.1rem, 5.5vw, 3.4rem);      /* page title */
  --fs-h2: clamp(1.7rem, 4vw, 2.6rem);        /* section title */
  --fs-h3: clamp(1.2rem, 2.4vw, 1.45rem);     /* card / block title */
  --fs-lead: clamp(1.05rem, 1.6vw, 1.25rem);  /* intro paragraph */
  --fs-body: 1.0625rem;                        /* 17px base */
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;
  --fs-label: 0.72rem;                         /* mono eyebrows */

  --lh-tight: 1.05;
  --lh-heading: 1.16;
  --lh-body: 1.65;
  --ls-tight: -0.035em;   /* display headings */
  --ls-label: 0.16em;     /* mono eyebrows */

  /* --------------------------------------------------------------------
     5. SPACE SCALE (8px base)
     Use --sp-* for component padding, --section-y for vertical section rhythm.
     -------------------------------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --section-y: clamp(3.5rem, 8vw, 7rem);
  --gutter: clamp(1.15rem, 4vw, 2rem);

  /* --------------------------------------------------------------------
     6. LAYOUT
     -------------------------------------------------------------------- */
  --max-w: 1180px;        /* standard content container */
  --max-w-narrow: 780px;  /* prose / article width */
  --header-h: 72px;

  /* --------------------------------------------------------------------
     7. RADIUS & ELEVATION
     One shadow per surface. Never stack multiple drop shadows.
     -------------------------------------------------------------------- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --e-card: 0 18px 48px -22px rgba(11, 31, 51, 0.38);
  --e-float: 0 26px 70px -30px rgba(6, 20, 32, 0.55);
  --e-dark: 0 24px 60px -28px rgba(0, 0, 0, 0.75);

  /* --------------------------------------------------------------------
     8. MOTION
     Durations are capped: nothing interactive exceeds 320ms. Ambient
     background loops are slow (20s–70s) and must be pausable by
     prefers-reduced-motion (handled in animations.css).
     -------------------------------------------------------------------- */
  --d-fast: 150ms;
  --d-base: 240ms;
  --d-slow: 320ms;
  --d-reveal: 620ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);      /* default ease-out-expo-ish */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --z-header: 100;
  --z-nav: 99;
  --z-top: 200;
}

/* ----------------------------------------------------------------------------
   SURFACE CONTEXT CLASSES
   Put `.on-dark` on any section with a dark background. All component styles in
   components.css read these variables, so a component dropped inside `.on-dark`
   recolours itself automatically. This is how new pages stay consistent without
   writing new CSS.
   ---------------------------------------------------------------------------- */
.on-dark {
  --surface: var(--c-deep);
  --surface-raised: var(--c-deep-2);
  --border: rgba(255, 255, 255, 0.12);
  --text-strong: var(--t-strong-on-dark);
  --text-body: var(--t-body-on-dark);
  --text-muted: var(--t-muted-on-dark);
  --accent: var(--c-pulse);
  color: var(--text-body);
  background-color: var(--surface);
}

.on-light {
  --surface: var(--c-paper);
  --surface-raised: var(--c-paper);
  --border: var(--c-line);
  --text-strong: var(--t-strong);
  --text-body: var(--t-body);
  --text-muted: var(--t-muted);
  --accent: var(--c-pulse-deep);
  color: var(--text-body);
  background-color: var(--surface);
}

/* Light band variant — use to separate two `.on-light` sections. */
.on-wash {
  --surface: var(--c-wash);
  --surface-raised: var(--c-paper);
  --border: var(--c-line);
  --text-strong: var(--t-strong);
  --text-body: var(--t-body);
  --text-muted: var(--t-muted);
  --accent: var(--c-pulse-deep);
  color: var(--text-body);
  background-color: var(--surface);
}