/* ==========================================================================
   Opria — design tokens
   Dark cinematic foundation. One accent family (the Opria blue/cyan), used
   only for CTAs, active states, data points and line graphics — never as a
   large background gradient.
   ========================================================================== */

/* --- Typefaces (self-hosted, variable, latin + latin-ext for Hungarian) --- */

@font-face {
  font-family: 'Space Grotesk';
  src: url('../assets/fonts/spacegrotesk-latin-ext.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('../assets/fonts/spacegrotesk-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  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: 'Inter';
  src: url('../assets/fonts/inter-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/inter-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  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 {
  /* --- Surfaces --------------------------------------------------------- */
  --bg:            #080808;
  --bg-raised:     #0d0d0d;
  --bg-elevated:   #111111;
  --surface:       #151517;  /* matches the product's Precision Dark ramp */
  --surface-hi:    #1b1b1e;
  --surface-sunk:  #0a0a0b;

  /* --- Hairlines -------------------------------------------------------- */
  --line-faint:    rgba(255, 255, 255, .055);
  --line:          rgba(255, 255, 255, .10);
  --line-strong:   rgba(255, 255, 255, .18);

  /* --- Text ------------------------------------------------------------- */
  --text:          #f5f5f5;
  --text-dim:      #969696;   /* ~5.6:1 on --bg-raised — do not go lighter-weight */
  /* Tertiary labels carry real information (eyebrows, captions, record ids),
     so this is held at ~5:1 on the darkest surface rather than going dimmer. */
  --text-faint:    #82828a;

  /* --- Accent (Opria) --------------------------------------------------- */
  --accent:        #38bdf8;   /* cyan — data points, line graphics, active marks */
  --accent-deep:   #2e6be6;   /* blue — primary CTA */
  --accent-press:  #2456cf;
  --accent-wash:   rgba(56, 189, 248, .10);
  --accent-line:   rgba(56, 189, 248, .38);

  /* --- Status colours, lifted verbatim from the product's slot palette --- */
  --s-checkin:     #06b6d4;
  --s-survey:      #3b82f6;
  --s-build:       #f59e0b;
  --s-inspect:     #22c55e;
  --s-handover:    #ec4899;
  --s-other:       #a855f7;

  /* --- Type ------------------------------------------------------------- */
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;

  --fs-eyebrow: .6875rem;
  --fs-body:    1.0625rem;
  --fs-lede:    clamp(1.0625rem, .95rem + .5vw, 1.1875rem);
  --fs-h1:      clamp(2.6rem, 1.1rem + 6.1vw, 5.6rem);
  --fs-h2:      clamp(2rem, 1rem + 3.6vw, 3.9rem);
  --fs-h3:      clamp(1.35rem, 1.1rem + .9vw, 1.85rem);
  --fs-stmt:    clamp(1.5rem, 1rem + 2vw, 2.6rem);

  /* --- Geometry: tight radii. Technical, not bubbly. -------------------- */
  --r-xs: 2px;
  --r-sm: 3px;
  --r-md: 6px;
  --r-lg: 10px;

  /* --- Rhythm ----------------------------------------------------------- */
  --gutter:   clamp(20px, 5vw, 72px);
  --maxw:     1320px;
  --sect-y:   clamp(88px, 11vw, 168px);

  /* --- Motion ----------------------------------------------------------- */
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --ease-io:   cubic-bezier(.65, .05, .36, 1);
  --dur:       .6s;

  /* --- Film grain, used sparingly over photography ---------------------- */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}