/* ==========================================================================
   SurveyBridge design tokens
   Brand palette values are taken verbatim from the SurveyBridge brand brief.
   Change a value here and it changes everywhere; components only use the
   semantic aliases at the bottom of :root, never raw hex values.
   ========================================================================== */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../assets/fonts/schibsted-grotesk-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Serif 4";
  src: url("../assets/fonts/source-serif-4-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Brand palette (exact) -------------------------------------------- */
  /* Forest and moss */
  --sb-moss: #3D5C43;            /* Primary Moss */
  --sb-primary: #3B4D3A;         /* Primary */
  --sb-moss-deep: #2A4130;       /* Moss Deep */
  --sb-moss-strong: #2F4735;     /* Moss Strong */
  --sb-primary-soft: #E6ECE3;    /* Primary Soft */

  /* Backgrounds and surfaces */
  --sb-paper: #F6F4EF;           /* Paper / main background */
  --sb-white: #FFFFFF;           /* Card surface */
  --sb-neutral-soft: #EFECE5;    /* Neutral Soft */

  /* Text */
  --sb-ink: #1B1F1C;             /* Ink */
  --sb-ink-soft: #39423B;        /* Ink Soft */
  --sb-muted: #5B6158;           /* Muted */
  --sb-ink-muted: #4A4F4A;       /* Ink Muted */

  /* Borders */
  --sb-line: #D8D3C7;            /* Line / Sand */
  --sb-border-subtle: #DAD6CB;   /* Subtle Border */
  --sb-green-border: #C9D6C5;    /* Green Border Accent */

  /* Semantic (use only where the meaning is needed) */
  --sb-success: #2F6B3F;
  --sb-danger: #D92D20;
  --sb-ember: #B03F2E;
  --sb-ember-strong: #8F3223;
  --sb-amber: #9C7A2E;

  /* Footer */
  --sb-footer-bg: #151A17;
  --sb-footer-text: #C9CEC8;

  /* ---- Typography ------------------------------------------------------- */
  --font-display: "Schibsted Grotesk", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-ui: var(--font-display);
  --font-text: "Source Serif 4", Georgia, "Times New Roman", serif;

  --fs-xs: 0.8125rem;                                         /* 13 */
  --fs-sm: 0.9375rem;                                         /* 15 */
  --fs-base: 1.125rem;                                        /* 18 */
  --fs-lead: clamp(1.1875rem, 1.05rem + 0.55vw, 1.4375rem);   /* 19 to 23 */
  --fs-h3: clamp(1.1875rem, 1.1rem + 0.35vw, 1.4375rem);
  --fs-h2: clamp(1.9375rem, 1.35rem + 2.3vw, 3.0625rem);      /* 31 to 49 */
  --fs-h1: clamp(2.5rem, 1.55rem + 4.1vw, 4.5rem);            /* 40 to 72 */

  --lh-tight: 1.06;
  --lh-heading: 1.14;
  --lh-text: 1.62;

  /* ---- Spacing (4-based scale) ------------------------------------------ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  --gutter: clamp(20px, 5vw, 48px);
  --grid-gap: clamp(20px, 3vw, 40px);
  --container: 1200px;
  --measure: 62ch;                /* body line length */
  --section-space: clamp(64px, 8vw, 112px);
  --header-h: 72px;

  /* ---- Shape ------------------------------------------------------------ */
  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 12px;

  /* ---- Motion ----------------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;

  /* ---- Semantic aliases used by components ------------------------------ */
  --color-bg: var(--sb-paper);
  --color-surface: var(--sb-white);
  --color-surface-alt: var(--sb-neutral-soft);
  --color-surface-brand: var(--sb-primary-soft);

  --color-text: var(--sb-ink);
  --color-text-soft: var(--sb-ink-soft);
  --color-text-muted: var(--sb-muted);

  --color-brand: var(--sb-moss);
  --color-brand-hover: var(--sb-moss-strong);
  --color-brand-active: var(--sb-moss-deep);
  --color-brand-ink: var(--sb-primary);

  --color-border: var(--sb-line);
  --color-border-subtle: var(--sb-border-subtle);
  --color-border-brand: var(--sb-green-border);

  --color-focus: var(--sb-moss);
  --color-ok: var(--sb-success);
  --color-pending: var(--sb-amber);
}