/* ─────────────────────────────────────────────
   NORDIVÉ — DESIGN TOKENS
   Off-white + navy + subtle blue link accent.
   "Where legal expertise meets technological precision."
   ───────────────────────────────────────────── */

:root {
  /* ── SURFACES ─────────────────────────────── */
  --off:        #FAF8F4;   /* primary page background (warm off-white) */
  --off-2:      #F4F1EB;   /* slightly deeper off-white (cards, alt panels) */
  --white:      #FFFFFF;   /* pure white — used inside cards on --off pages */
  --navy:       #0E1B33;   /* primary brand surface (dark sections, buttons) */
  --navy-2:     #162644;
  --navy-3:     #1C3057;

  /* ── INK (text) ───────────────────────────── */
  /* Polished palette — slightly cooler/softer than the legacy values
     shipping on nordiveai.no. Use these for new work. */
  --ink:        #1a2330;   /* headings, primary text (was #0E1B33) */
  --ink-2:      #3a4658;   /* body text          (was #2A3A5C)     */
  --mid:        #6c7785;   /* muted, labels, meta (was #5A6580)    */
  --dim:        #98a2b1;   /* placeholder / disabled (was #8A93A8) */

  /* ── RULES (borders) ──────────────────────── */
  --rule:       rgba(14,27,51,.08);
  --rule-2:     rgba(14,27,51,.05);

  /* ── ACCENT ──────────────────────────────── */
  /* Blue is used SPARINGLY — links, key interactive accents, and the
     "scan-line" highlight inside product animations. NEVER for hero
     gradients or large filled surfaces. The hero stays navy + off-white. */
  --brand:      #2952d9;   /* interactive accent (also --link)      */
  --brand-h:    #2945a0;   /* hover                                 */
  --link:       #2952d9;   /* alias                                  */
  --link-h:     #2945a0;

  /* ── SEMANTIC ────────────────────────────── */
  --red:        #B0223C;   /* urgent / overdue  (polished from #B0413E) */
  --red-bg:     rgba(176,34,60,.08);
  --amber:      #B8821C;   /* warning           (polished from #A87528) */
  --amber-bg:   rgba(184,130,28,.10);
  --green:      #3F7A52;   /* success / verified                        */
  --green-bg:   rgba(63,122,82,.07);

  /* ── TYPOGRAPHY ──────────────────────────── */
  --font-h:     'Inter Tight', system-ui, sans-serif;  /* display + labels */
  --font-serif: 'Playfair Display', Georgia, serif;    /* italic accents only */
  --font-body:  'Inter Tight', system-ui, sans-serif;  /* UI text — same family as display, weight does the differentiation */
  --font-italic: 'Playfair Display', Georgia, serif;   /* alias for italic emphasis */

  /* Type scale (matches site clamps) */
  --t-hero:     clamp(2.4rem, 6.5vw, 5.6rem);   /* H1 hero */
  --t-h2:       clamp(2rem,   4vw,   3.2rem);   /* section heading */
  --t-h3:       1.45rem;                         /* card heading */
  --t-eye:      0.72rem;                         /* uppercase eyebrow */
  --t-body:     1rem;
  --t-body-lg:  1.1rem;
  --t-sm:       0.88rem;
  --t-xs:       0.78rem;

  --lh-h:       1.05;     /* tight on display */
  --lh-body:    1.55;
  --ls-h:       -0.035em; /* tight letter-spacing on large display */
  --ls-h2:      -0.03em;
  --ls-sm:      -0.005em;
  --ls-eye:     0.2em;    /* widely-tracked uppercase eyebrows */

  /* ── SPACING ─────────────────────────────── */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;        /* section vertical rhythm (7rem ≈ 112px on the site) */

  /* ── RADII ───────────────────────────────── */
  /* Nordivé is *low-radius*: buttons are 2px, cards 6–8px, never pill except chip-tags. */
  --r-btn:   2px;
  --r-chip:  3px;
  --r-card:  6px;
  --r-card-lg: 8px;
  --r-pill:  99px;

  /* ── SHADOWS ─────────────────────────────── */
  /* All shadows are downward, blurry, navy-tinted. No glow, no neumorphism. */
  --shadow-sm: 0 1px 0 rgba(14,27,51,.02);
  --shadow-md: 0 12px 28px -16px rgba(14,27,51,.16);
  --shadow-lg: 0 18px 40px -22px rgba(14,27,51,.18);
  --shadow-xl: 0 22px 50px -28px rgba(14,27,51,.18);

  /* ── MOTION ──────────────────────────────── */
  /* NEVER linear. Always ease-in-out or cubic-bezier. */
  --ease:       cubic-bezier(.2,.7,.2,1);  /* primary easing — slight overshoot-feel */
  --ease-soft:  ease-in-out;
  --dur-fast:   .18s;
  --dur:        .25s;
  --dur-slow:   .8s;   /* reveal fades */

  /* ── LAYOUT ──────────────────────────────── */
  --container: 1180px;
  --nav-h:     72px;
  --pad-x:     clamp(20px, 4vw, 40px);
}

/* ─────────────────────────────────────────────
   SEMANTIC TYPE STYLES
   Apply to any element by class.
   ───────────────────────────────────────────── */

.t-eye {
  font-family: var(--font-h);
  font-size: var(--t-eye);
  font-weight: 500;
  letter-spacing: var(--ls-eye);
  text-transform: uppercase;
  color: var(--mid);
}
.t-eye-d { color: rgba(255,255,255,.45); }

.t-hero {
  font-family: var(--font-h);
  font-weight: 400;
  font-size: var(--t-hero);
  line-height: 1.02;
  letter-spacing: var(--ls-h);
  color: var(--navy);
}
.t-hero em,
.t-h2 em,
.t-h3 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: inherit;
}

.t-h2 {
  font-family: var(--font-h);
  font-weight: 400;
  font-size: var(--t-h2);
  line-height: var(--lh-h);
  letter-spacing: var(--ls-h2);
  color: var(--navy);
}

.t-h3 {
  font-family: var(--font-h);
  font-weight: 500;
  font-size: var(--t-h3);
  letter-spacing: -0.02em;
  color: var(--navy);
}

.t-body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink-2);
}

.t-sub {
  font-family: var(--font-body);
  font-size: var(--t-body-lg);
  line-height: 1.65;
  color: var(--ink-2);
}

.t-meta {
  font-family: var(--font-body);
  font-size: var(--t-xs);
  color: var(--mid);
  letter-spacing: var(--ls-sm);
}

.t-num {
  font-family: var(--font-h);
  font-feature-settings: "tnum";
  letter-spacing: -0.02em;
}

.t-serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}

/* tabular numbers everywhere numbers live */
.tnum { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }

/* ─────────────────────────────────────────────
   USAGE NOTES
   ─────────────────────────────────────────────
   • Inter Tight = headings, eyebrows, labels, numbers (tabular).
   • Playfair Display italic = the *one* word per H1/H2 that the brand
     italicizes for emphasis (e.g. "norsk", "advokatpraksis").
     Use it on a single phrase — never a full sentence.
   • Inter = body copy.
   • Blue (#1E3A8A) is a LINK color only. Never use it for primary buttons,
     hero gradients, or large surfaces. Navy is the brand.
   • Animations: ease-in-out or cubic-bezier(.2,.7,.2,1) — NEVER linear.
   • Animations should loop seamlessly in 5–12s.
   • No emoji. Use SVG icons, unicode → arrows, dots, checks, X.
   ───────────────────────────────────────────── */