/* ================================================================
   tokens.css — SountIO Shared Design System
   Shared across all product pages. Do NOT put layout rules here.

   Usage in product pages:
     <link rel="stylesheet" href="../../css/tokens.css">
     <link rel="stylesheet" href="css/styles.css">

   To override a token for a specific product, re-declare it in
   that product's css/styles.css inside :root or a scoped selector.
================================================================ */

:root {
  /* ── Colour palette ── */
  --c-bg:           #07090F;
  --c-bg-2:         #0C0F1A;
  --c-bg-card:      rgba(255, 255, 255, 0.028);
  --c-bg-card-h:    rgba(255, 255, 255, 0.055);
  --c-border:       rgba(255, 255, 255, 0.07);
  --c-border-s:     rgba(255, 255, 255, 0.13);

  --c-text-1:       #EDF0F5;
  --c-text-2:       #8B98B1;
  --c-text-3:       #4A5568;

  /* Accent — overridden per product */
  --c-accent:       #6A9FD4;    /* Nordic ice-blue (Andas HR default) */
  --c-accent-dim:   rgba(106, 159, 212, 0.14);
  --c-accent-glow:  rgba(106, 159, 212, 0.22);

  --c-warm:         #C8A97A;
  --c-success:      #5BBFA4;
  --c-danger:       #C07A7A;

  /* ── Typography ── */
  --f-display: 'DM Serif Display', 'Georgia', 'Times New Roman', serif;
  --f-body:    'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;

  /* ── Fluid type scale ── */
  --t-xs:   clamp(0.70rem,  0.9vw,  0.78rem);
  --t-sm:   clamp(0.82rem,  1.2vw,  0.90rem);
  --t-base: clamp(0.95rem,  1.5vw,  1.00rem);
  --t-lg:   clamp(1.05rem,  1.8vw,  1.20rem);
  --t-xl:   clamp(1.25rem,  2.4vw,  1.50rem);
  --t-2xl:  clamp(1.60rem,  3.2vw,  2.20rem);
  --t-3xl:  clamp(2.20rem,  5.0vw,  3.20rem);
  --t-hero: clamp(2.80rem,  6.5vw,  5.00rem);

  /* ── Fluid spacing ── */
  --sp-1:   0.25rem;
  --sp-2:   0.50rem;
  --sp-3:   0.75rem;
  --sp-4:   1.00rem;
  --sp-5:   1.25rem;
  --sp-6:   1.50rem;
  --sp-8:   2.00rem;
  --sp-10:  2.50rem;
  --sp-12:  3.00rem;
  --sp-16:  4.00rem;
  --sp-20:  5.00rem;
  --sp-24:  6.00rem;

  /* ── Section vertical rhythm ── */
  --section-py: clamp(4rem, 8vw, 8rem);

  /* ── Layout ── */
  --container:   1200px;
  --container-n: 780px;

  /* ── Radii ── */
  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   20px;
  --r-pill: 9999px;

  /* ── Shadows ── */
  --shadow-card: 0 1px 0 rgba(255,255,255,0.05) inset,
                 0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-glow: 0 0 60px rgba(106, 159, 212, 0.12);

  /* ── Transitions ── */
  --ease:   cubic-bezier(0.2, 0, 0, 1);
  --t-fast: 120ms var(--ease);
  --t-norm: 240ms var(--ease);
  --t-slow: 420ms var(--ease);
}