/* ============================================================
   Tak24 Design Tokens — colors + type
   Source of truth: tak24_no_website/src/app/globals.css, tailwind.config.js,
   Figma (Tak24.no website.fig), and measured usage in page.tsx.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Outfit:wght@400;500;600;700;800&display=swap');

:root {
  /* ── Brand core ─────────────────────────────────────────── */
  --tak-ink:        #212427;  /* primary foreground, buttons, body text */
  --tak-ink-hover:  #424548;  /* foreground hover */
  --tak-bg:         #F5F6F7;  /* default app background (light gray) */
  --tak-surface:    #FFFFFF;  /* cards, nav, sidebars */

  /* Accent — Scandinavian forest green for trust CTAs */
  --tak-accent:        #12B981;  /* "highlight" — conversion buttons */
  --tak-accent-hover:  #2FD49B;
  --tak-accent-deep:   #273F2F;  /* forest theme primary, hero sections */
  --tak-accent-deeper: #2F4636;

  /* Warm secondary — used for badges, pills, illustrations */
  --tak-sand:     #FFDBA0;  /* howItWorks badge pill */
  --tak-sand-50:  #F8F7EF;  /* warm off-white backgrounds */
  --tak-orange:   #FBA960;  /* illustration orange (roof, paper) */
  --tak-orange-2: #FF9F5B;

  /* Ocean theme (alt landing pages) */
  --tak-ocean-bg:        #E5E9EF;
  --tak-ocean-secondary: #1F3B57;

  /* Neutrals */
  --tak-neutral-0:   #FFFFFF;
  --tak-neutral-50:  #F5F6F7;
  --tak-neutral-100: #F4F4F4;  /* card borders, timeline rails */
  --tak-neutral-150: #ECECEC;  /* header bottom border */
  --tak-neutral-200: #E9EBEB;  /* pill border */
  --tak-neutral-300: #D1D5DC;  /* on-dark muted text */
  --tak-neutral-400: #9CA3AF;
  --tak-neutral-500: #6B7280;  /* muted label */
  --tak-neutral-600: #424548;
  --tak-neutral-700: #262626;
  --tak-neutral-800: #212427;
  --tak-neutral-900: #101010;

  /* Semantic */
  --tak-success:       #12B981;
  --tak-success-ink:   #09B91E;  /* "Verifisert" badge */
  --tak-danger:        #E53935;
  --tak-verified-bg:   #DCFCE7;
  --tak-warning-bg:    #FFDBA0;
  --tak-info-ink:      #0F184C;  /* used sparingly in marketing */

  /* Semantic aliases (match tailwind.config.js) */
  --background: var(--tak-bg);
  --foreground: var(--tak-ink);
  --primary:    var(--tak-ink);
  --secondary:  var(--tak-ink);
  --highlight:  var(--tak-accent);
  --hover:      var(--tak-accent-hover);

  /* ── Typography ─────────────────────────────────────────── */
  --font-sans:    'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-display: 'Outfit', system-ui, -apple-system, sans-serif;
  --font-mono:    'Inter', ui-monospace, monospace;

  /* Type scale — taken from actual usage in page.tsx + Figma metadata.
     Display = Outfit (headings, hero, section titles)
     Body    = Inter  (paragraphs, inputs, buttons, labels) */
  --fs-hero:   52px;   --lh-hero:   62px;   /* Outfit Bold — H1 */
  --fs-h1:     40px;   --lh-h1:     48px;   /* Outfit Bold/Semibold — section title */
  --fs-h2:     32px;   --lh-h2:     40px;
  --fs-h3:     24px;   --lh-h3:     34px;   /* Outfit Semibold — card title */
  --fs-h4:     20px;   --lh-h4:     28px;   /* Outfit Semibold — eyebrow */
  --fs-lead:   18px;   --lh-lead:   26px;   /* Inter — intro paragraph */
  --fs-body:   16px;   --lh-body:   24px;   /* Inter — default body */
  --fs-small:  14px;   --lh-small:  22px;
  --fs-micro:  12px;   --lh-micro:  16px;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  /* ── Spacing / radius / shadow ──────────────────────────── */
  --r-sm:  4px;
  --r-md:  8px;
  --r-lg:  10px;
  --r-xl:  12px;
  --r-2xl: 16px;
  --r-pill: 100px;

  --shadow-card:   2px 2px 9px 0 rgba(0,0,0,0.04);
  --shadow-card-h: 2px 2px 12px 0 rgba(0,0,0,0.08);
  --shadow-soft:   4px 4px 12px 0 rgba(0,0,0,0.01);

  --container-max: 1170px;   /* main content */
  --container-wide: 1210px;  /* header strip */
  --container-xl:  1440px;   /* hero, full-width sections */

  --dur-fast:   150ms;
  --dur-base:   300ms;
  --ease-std:   cubic-bezier(.4,0,.2,1);
}

/* ========= Themes from globals.css ========= */
.theme-ocean {
  --background: var(--tak-ocean-bg);
  --secondary:  var(--tak-ocean-secondary);
}
.theme-forest {
  --background: #F0F1EB;
  --foreground: #1D2F23;
  --primary:    var(--tak-accent-deep);
  --secondary:  var(--tak-accent-deeper);
  --highlight:  #133E23;
  --hover:      #1C5A31;
}

/* ========= Element defaults ========= */
html { font-family: var(--font-sans); color: var(--foreground); background: var(--background); }
body { color: var(--foreground); background: var(--background); }

h1, .h1-hero { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-hero); line-height: var(--lh-hero); letter-spacing: 0; color: var(--primary); }
h2, .h1 { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-h1); line-height: var(--lh-h1); color: var(--primary); }
h3, .h2 { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-h2); line-height: var(--lh-h2); color: var(--primary); }
h4, .h3 { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--primary); }
.eyebrow { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-h4); line-height: var(--lh-h4); color: var(--primary); }

p, .body { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--primary); }
.lead { font-size: var(--fs-lead); line-height: var(--lh-lead); }
.small { font-size: var(--fs-small); line-height: var(--lh-small); }
.micro { font-size: var(--fs-micro); line-height: var(--lh-micro); }
.muted { color: var(--tak-neutral-500); }

/* ========= Utility primitives ========= */
.tak-pill-badge {
  display: inline-block;
  background: var(--tak-sand);
  border-radius: var(--r-pill);
  padding: 2px 35.5px;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 28px;
  color: #000;
}
.tak-card {
  background: var(--tak-surface);
  border: 1px solid var(--tak-neutral-100);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-card);
}
.tak-card--soft {
  background: var(--tak-surface);
  border: 1px solid var(--tak-neutral-100);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-soft);
}
.tak-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-sans); font-weight: var(--fw-medium);
  font-size: 16px; line-height: 20px;
  padding: 16px 20px;
  border-radius: var(--r-md);
  transition: background var(--dur-fast) var(--ease-std);
  cursor: pointer; border: 0;
}
.tak-btn--primary { background: var(--tak-ink); color: #fff; }
.tak-btn--primary:hover { background: var(--tak-ink-hover); }
.tak-btn--accent  { background: var(--tak-accent); color: #fff; }
.tak-btn--accent:hover { background: var(--tak-accent-hover); }
.tak-btn--outline { background: #fff; color: var(--tak-ink); border: 1px solid var(--tak-neutral-200); box-shadow: var(--shadow-card); }
.tak-btn--sm { padding: 6px 20px; font-size: 16px; line-height: 20px; border-radius: var(--r-md); }

.tak-input {
  display: block; width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--tak-neutral-100);
  border-radius: var(--r-md);
  font-family: var(--font-sans); font-size: 16px; line-height: 24px;
  background: #fff; color: var(--primary);
  transition: border-color var(--dur-fast) var(--ease-std);
}
.tak-input::placeholder { color: rgba(33,36,39,0.5); }
.tak-input:focus { outline: none; border-color: var(--tak-accent); }
.tak-input[aria-invalid="true"] { border-color: var(--tak-danger); }