/* ==========================================================================
   AmPuH SEO Intelligence Next - design tokens
   --------------------------------------------------------------------------
   Single source of truth for colour, type, spacing, elevation and motion.
   Colours are authored in OKLCH: equal lightness steps look equal, which is
   what keeps the score bands readable next to each other. Every neutral is
   tinted a few thousandths toward the brand hue, so nothing reads as dead grey.
   ========================================================================== */

:root {
  /* ---- neutrals, tinted toward pine ---- */
  --ink-900: oklch(16.5% 0.016 158);
  --ink-850: oklch(19% 0.017 158);
  --ink-800: oklch(22% 0.018 158);
  --ink-700: oklch(27% 0.018 158);
  --ink-600: oklch(34% 0.016 158);

  --paper:   oklch(97.8% 0.005 92);
  --paper-2: oklch(99.4% 0.003 92);
  --paper-3: oklch(95.4% 0.007 92);
  --paper-4: oklch(93% 0.008 100);

  --line:        oklch(90.5% 0.008 120);
  --line-strong: oklch(83% 0.011 120);

  --text:   oklch(24% 0.014 158);
  --text-2: oklch(47% 0.012 150);
  --text-3: oklch(61% 0.010 140);

  --on-ink:   oklch(95% 0.008 150);
  --on-ink-2: oklch(76% 0.012 150);
  --on-ink-3: oklch(60% 0.012 150);

  /* ---- brand ---- */
  --pine:      oklch(45% 0.104 158);
  --pine-deep: oklch(35% 0.088 158);
  --pine-soft: oklch(94.5% 0.022 158);
  --pine-line: oklch(86% 0.038 158);
  --lime:      oklch(82% 0.155 148);

  /* ---- semantic ---- */
  --red:        oklch(51% 0.175 27);
  --red-soft:   oklch(95.5% 0.022 27);
  --red-line:   oklch(88% 0.05 27);
  --amber:      oklch(60% 0.125 68);
  --amber-soft: oklch(96% 0.032 80);
  --amber-line: oklch(88% 0.06 78);

  /* ---- spacing, 4pt base ---- */
  --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;

  /* ---- radius ---- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;

  /* ---- elevation ---- */
  --sh-1: 0 1px 2px oklch(20% 0.02 158 / 0.05);
  --sh-2: 0 2px 4px oklch(20% 0.02 158 / 0.04), 0 8px 20px oklch(20% 0.02 158 / 0.05);
  --sh-3: 0 24px 60px oklch(16% 0.02 158 / 0.18);

  /* ---- motion: exponential ease-out, no bounce ---- */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- stacking ---- */
  --z-sticky: 40;
  --z-chrome: 60;
  --z-dialog: 100;
}

/* Older engines without OKLCH support get an sRGB approximation of the same
   palette rather than an unstyled page. */
@supports not (color: oklch(50% 0.1 158)) {
  :root {
    --ink-900: #171f1b; --ink-850: #1d2723; --ink-800: #232e29; --ink-700: #2d3a34; --ink-600: #3d4c45;
    --paper: #fbfaf7; --paper-2: #fefdfb; --paper-3: #f3f1ea; --paper-4: #eceae1;
    --line: #e5e3dc; --line-strong: #cfccc2;
    --text: #22302a; --text-2: #5c6b63; --text-3: #8b978f;
    --on-ink: #eef2ef; --on-ink-2: #b3c0b8; --on-ink-3: #8b9a92;
    --pine: #2f6f4e; --pine-deep: #24553d; --pine-soft: #eaf4ee; --pine-line: #cbe2d4; --lime: #8fdca6;
    --red: #b03426; --red-soft: #fbeae7; --red-line: #f0cec8;
    --amber: #9a6415; --amber-soft: #fdf3e3; --amber-line: #efdcbd;
  }
}