/* Design tokens shared by every page, from .claude/skills/nafnaveisla-design/SKILL.md (sections 2-4).
   Use only these variables in page CSS. Fonts (--font-display, --font-ui) come from fonts.css. */
@import url('../fonts/fonts.css');

:root {
  /* Blue-moss green family */
  --mist: #e3ebe6; /* page ground: the sky */
  --haze: #d2dfd8; /* tone step on mist */
  --sage: #a7bfb3; /* illustration fills, decorative only */
  --moss: #5f8374; /* input border, leaves, large text >= 24px only */
  --moss-deep: #3c5f52; /* secondary text */
  --ink: #1e3830; /* primary text, focus ring, illustration outline */
  /* Beige and brown */
  --paper: #fbf7f0; /* input fill, petals */
  --linen: #f4ecdf; /* the heath: action shelf, reveal ground */
  --sand: #e2d2ba; /* selection, pressed chip, baby-object fills */
  --honey: #b88a5c; /* illustration only */
  --walnut: #6e4b33; /* the accent: primary buttons */
  --walnut-hi: #7b5640;
  --walnut-lo: #61422d;
  --cocoa: #4b3223;
  --on-walnut: #fbf4ea;
  /* Right and wrong */
  --clover: #27703f;
  --clover-tint: #d5ebda;
  --clover-ink: #1c5434;
  --berry: #a93644;
  --berry-tint: #f5dcdc;
  --berry-ink: #7c2230;
  /* Illustration-only accents */
  --buttercup: #d9a94e;
  --forgetmenot: #9db9d6;
  --blagresi: #9590c2;

  /* Type scale */
  --t-reveal: clamp(4.5rem, 24vw, 9rem);
  --t-cover: clamp(2.5rem, 11vw, 4.5rem);
  --t-question: 1.75rem;
  --t-body: 1.25rem;
  --t-input: 1.5rem;
  --t-button: 1.375rem;
  --t-small: 1.0625rem;

  /* Motion */
  --ease-settle: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-glide: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-sway: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-leave: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --spring-soft: linear(0, 0.025, 0.089, 0.176, 0.276, 0.378, 0.479, 0.573, 0.658, 0.732, 0.797, 0.85, 0.895, 0.93, 0.958, 0.979, 0.994, 1.005, 1.013, 1.017, 1.019, 1.02, 1.019, 1.018, 1.016, 1.014, 1.012, 1.01, 1.008, 1.007, 1.005, 1);
  --spring-pop: linear(0, 0.04, 0.142, 0.279, 0.431, 0.581, 0.719, 0.838, 0.933, 1.006, 1.057, 1.088, 1.104, 1.107, 1.1, 1.089, 1.073, 1.057, 1.041, 1.027, 1.015, 1.005, 0.998, 0.993, 0.99, 0.989, 0.989, 0.99, 0.991, 0.993, 0.994, 1);
  --dur-press: 110ms;
  --dur-quick: 180ms;
  --dur-base: 280ms;
  --dur-screen: 420ms;
  --dur-reveal: 900ms;
  --stagger-step: 70ms;
  --stagger-item: 60ms;
  --stagger-letter: 45ms;

  /* Legacy aliases (early drafts used these names). Prefer the names above. */
  --moss-50: var(--mist);
  --moss-100: var(--haze);
  --moss-200: var(--haze);
  --moss-300: var(--sage);
  --moss-400: var(--sage);
  --moss-500: var(--moss);
  --moss-600: var(--moss-deep);
  --moss-700: var(--moss-deep);
  --ink-soft: var(--moss-deep);
  --cream: var(--paper);
  --beige-100: var(--linen);
  --beige-200: var(--sand);
  --beige-300: var(--sand);
  --brown-500: var(--walnut);
  --brown-700: var(--cocoa);
  --good: var(--clover);
  --good-soft: var(--clover-tint);
  --bad: var(--berry);
  --bad-soft: var(--berry-tint);
  --surface: var(--paper);
  --line: color-mix(in srgb, var(--ink) 14%, transparent);
  --ease-out: var(--ease-settle);
  --ease-in-out: var(--ease-sway);
  --ease-spring: var(--ease-settle);
}

@supports not (animation-timing-function: linear(0, 1)) {
  :root {
    --spring-soft: var(--ease-settle);
    --spring-pop: var(--ease-settle);
  }
}