/* Oz Digital — Webfonts
 * Amended to a simpler, more modern type system suited to a mid-sized design
 * agency: one contemporary grotesque used across display + body, plus a clean
 * mono for labels. (Google Fonts — swap for self-hosted brand fonts if provided.)
 *   Schibsted Grotesk — modern neo-grotesque, display + body
 *   Geist Mono        — clean monospace for eyebrows / labels
 */
@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400&family=Geist+Mono:wght@400;500;600&display=swap');


/* Oz Digital Design System — generated from tokens.json */
:root, [data-theme="light"] {
  --oz-amber-50: #fdebef;
  --oz-amber-100: #fbd0da;
  --oz-amber-200: #f7a6b9;
  --oz-amber-300: #f27c96;
  --oz-amber-400: #f15c7c;
  --oz-amber-500: #ee4266;
  --oz-amber-600: #d82d53;
  --oz-amber-700: #b31f41;
  --oz-amber-800: #7c1830;
  --oz-ink-900: #000080;
  --oz-ink-800: #0d0d8c;
  --oz-ink-700: #1e1e99;
  --oz-ink-600: #3535a8;
  --oz-white: #ffffff;
  --oz-gray-50: #f5f6f6;
  --oz-gray-100: #eaecec;
  --oz-gray-200: #d8dcdb;
  --oz-gray-300: #c4cbca;
  --oz-gray-400: #9aa3a1;
  --oz-gray-500: #6f7876;
  --oz-gray-600: #4c5453;
  --oz-gray-700: #2e3433;
  --oz-success: #1f8a5b;
  --oz-success-bg: #e4f3ec;
  --oz-error: #d64541;
  --oz-error-bg: #fbe7e6;
  --oz-info: #000080;
  --oz-info-bg: #e6e6f2;
  --oz-warning: #b31f41;
  --oz-warning-bg: var(--oz-amber-50);
  --color-brand: var(--oz-amber-500);
  --color-brand-hover: var(--oz-amber-600);
  --color-brand-active: var(--oz-amber-700);
  --text-heading: var(--oz-ink-900);
  --text-body: var(--oz-gray-700);
  --text-muted: var(--oz-gray-500);
  --text-on-brand: var(--oz-ink-900);
  --text-on-dark: var(--oz-white);
  --text-inverse-muted: var(--oz-gray-400);
  --surface-page: var(--oz-white);
  --surface-muted: var(--oz-gray-50);
  --surface-card: var(--oz-white);
  --surface-ink: var(--oz-ink-900);
  --surface-brand: var(--oz-amber-500);
  --surface-brand-soft: var(--oz-amber-50);
  --border-subtle: var(--oz-gray-200);
  --border-strong: var(--oz-ink-900);
  --border-brand: var(--oz-amber-500);
  --focus-ring: var(--oz-ink-900);
  --shadow-xs: 0 1px 2px rgba(0,0,40,0.06);
  --shadow-sm: 0 2px 6px rgba(0,0,40,0.09);
  --shadow-md: 0 8px 24px rgba(0,0,40,0.11);
  --shadow-lg: 0 20px 48px rgba(0,0,40,0.15);
}
:root {
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 6rem;
  --space-11: 8rem;
  --container-max: 1200px;
  --container-wide: 1320px;
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 22px;
  --radius-pill: 999px;
  --border-w: 1px;
  --border-w-strong: 2px;
  --font-display: 'Schibsted Grotesk', system-ui, -apple-system, sans-serif;
  --font-body: 'Schibsted Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono: 'Geist Mono', 'SFMono-Regular', ui-monospace, monospace;
}
.type-display { font-family: var(--font-display); font-size: 5.25rem; line-height: 1.05; font-weight: 700; letter-spacing: -0.02em; }
.type-h1 { font-family: var(--font-display); font-size: 3.5rem; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; }
.type-h2 { font-family: var(--font-display); font-size: 2.5rem; line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; }
.type-h3 { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; }
.type-h4 { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; }
.type-lead { font-family: var(--font-body); font-size: 1.25rem; line-height: 1.6; font-weight: 400; }
.type-body { font-family: var(--font-body); font-size: 1rem; line-height: 1.6; font-weight: 400; }
.type-sm { font-family: var(--font-body); font-size: 0.875rem; line-height: 1.6; font-weight: 400; }
.type-xs { font-family: var(--font-body); font-size: 0.75rem; line-height: 1.6; font-weight: 400; }
.type-eyebrow { font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.22em; }


/* Oz Digital — Color tokens
 * Brand palette (client-specified):
 *   #EE4266  Raspberry  — primary brand accent
 *   #000080  Navy       — ink / dark surfaces & headings
 *   #C4CBCA  Mist        — cool neutral grey
 * Variable names keep the original scale keys for compatibility; values below
 * are the amended palette.
 */
/* Every colour above is now defined in tokens.json and compiled to tokens.css. */



/* Oz Digital — Typography tokens */
:root {
  /* Weights */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */
  --fw-extra:    800; /* @kind font */

  /* Fluid display sizes (marketing scale) */
  --fs-display:  clamp(2.75rem, calc(1.5rem + 5vw), 5.25rem); /* @kind font */
  --fs-h1:       clamp(2.25rem, calc(1.4rem + 3.4vw), 3.5rem); /* @kind font */
  --fs-h2:       clamp(1.75rem, calc(1.2rem + 2vw), 2.5rem); /* @kind font */
  --fs-h3:       1.5rem; /* @kind font */
  --fs-h4:       1.25rem; /* @kind font */

  /* Text sizes */
  --fs-lead:  1.25rem; /* @kind font */
  --fs-body:  1rem; /* @kind font */
  --fs-sm:    0.875rem; /* @kind font */
  --fs-xs:    0.75rem; /* @kind font */

  /* Eyebrow / label — the wide-tracked uppercase brand motif */
  --fs-eyebrow: 0.8125rem; /* @kind font */

  /* Line heights */
  --lh-tight:   1.05; /* @kind font */
  --lh-heading: 1.15; /* @kind font */
  --lh-snug:    1.35; /* @kind font */
  --lh-body:    1.6; /* @kind font */

  /* Letter spacing */
  --ls-display: -0.02em; /* @kind font */
  --ls-heading: -0.01em; /* @kind font */
  --ls-body:    0; /* @kind font */
  --ls-eyebrow: 0.22em; /* @kind font */
  --ls-label:   0.08em; /* @kind font */
}


/* Oz Digital — Spacing tokens (4px base grid) */
:root {
  /* Layout */
  --gutter: clamp(1.25rem, 5vw, 4rem); /* @kind spacing */
  --section-y: clamp(4rem, 8vw, 8rem); /* @kind spacing */
}


/* Oz Digital — Radius, border & shadow tokens
 * The brand mark is sharp and geometric, so radii stay restrained.
 */
:root {
  /* Signature offset shadow — solid ink, no blur (used on hero cards/buttons) */
  --shadow-block: 6px 6px 0 var(--oz-ink-900);
  --shadow-block-amber: 6px 6px 0 var(--oz-amber-500);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.45, 0, 0.2, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 200ms; /* @kind other */
  --dur-slow: 360ms; /* @kind other */
}


/* Oz Digital — base element styles & a few brand utilities.
 * Kept light: tokens do the heavy lifting; components own their own styling.
 */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-heading);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  font-weight: var(--fw-bold);
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); letter-spacing: var(--ls-display); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { margin: 0 0 1em; text-wrap: pretty; }
a { color: inherit; }

/* ---- Brand utilities ---- */

/* Wide-tracked uppercase eyebrow — the core brand motif */
.oz-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Big display heading */
.oz-display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--text-heading);
  text-transform: uppercase;
}

/* Raspberry text emphasis on a word */
.oz-mark {
  color: var(--oz-amber-500);
}

.oz-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}