/* Design tokens, copied unchanged from design/tokens/ (colors, typography, spacing). */

:root {
  /* Sun — from the logo mark (#F5A33A → #E64F3F). Action color. */
  --wp-sun-50:  #FFF4EC;
  --wp-sun-100: #FFE4D1;
  --wp-sun-200: #FFC7A3;
  --wp-sun-300: #FBA272;
  --wp-sun-400: #F5833F;
  --wp-sun-500: #EE6A2B;
  --wp-sun-600: #D4541C;
  --wp-sun-700: #AD4216;
  --wp-sun-800: #86331A;
  --wp-sun-900: #5E2514;

  /* Ink — warm brown-black neutrals, from the wordmark */
  --wp-ink-950: #16100D;
  --wp-ink-900: #1E1511;
  --wp-ink-800: #2E231D;
  --wp-ink-700: #4A3B32;
  --wp-ink-600: #6B5A4F;
  --wp-ink-500: #8C7A6E;
  --wp-ink-400: #ADA096;
  --wp-ink-300: #CFC5BD;
  --wp-ink-200: #E6DFD8;
  --wp-ink-100: #F1EDE7;
  --wp-ink-50:  #FAF7F2;
  --wp-white:   #FFFFFF;

  /* Status — only for uptime / health, never decoration */
  --wp-ok-500:    #2E7D4F;
  --wp-ok-100:    #E3F3E9;
  --wp-watch-500: #B8770A;
  --wp-watch-100: #FBF0D6;
  --wp-down-500:  #B8372A;
  --wp-down-100:  #FAE4E0;

  /* Semantic */
  --bg-page:        var(--wp-ink-50);
  --bg-card:        var(--wp-white);
  --bg-dark:        var(--wp-ink-900);
  --bg-dark-raised: var(--wp-ink-800);
  --bg-accent-soft: var(--wp-sun-50);

  --text-primary:   var(--wp-ink-900);
  --text-secondary: var(--wp-ink-600);
  --text-muted:     var(--wp-ink-500);
  --text-on-dark:   var(--wp-ink-50);
  --text-on-dark-secondary: var(--wp-ink-300);
  --text-on-accent: var(--wp-ink-900);
  --text-link:      var(--wp-sun-700);
  --text-link-hover: var(--wp-sun-800);

  --accent:         var(--wp-sun-500);
  --accent-hover:   var(--wp-sun-600);
  --accent-text:    var(--wp-sun-700);

  --border-subtle:  var(--wp-ink-200);
  --border-strong:  var(--wp-ink-900);
  --border-on-dark: var(--wp-ink-700);

  --focus-ring:     var(--wp-sun-500);
}

:root {
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-sans:  "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Display / headings — Source Serif 4, 600–700, tight */
  --text-display-size: 60px;  --text-display-lh: 1.04; --text-display-ls: -0.02em;
  --text-h1-size: 48px;       --text-h1-lh: 1.08;      --text-h1-ls: -0.02em;
  --text-h2-size: 36px;       --text-h2-lh: 1.15;      --text-h2-ls: -0.015em;
  --text-h3-size: 24px;       --text-h3-lh: 1.25;      --text-h3-ls: -0.01em;
  --text-h4-size: 19px;       --text-h4-lh: 1.3;       --text-h4-ls: 0;

  /* Body — IBM Plex Sans */
  --text-lead-size: 19px;  --text-lead-lh: 1.55;
  --text-body-size: 16px;  --text-body-lh: 1.6;
  --text-small-size: 14px; --text-small-lh: 1.5;
  --text-caption-size: 13px; --text-caption-lh: 1.4;

  /* Eyebrow / labels — IBM Plex Mono, uppercase */
  --text-eyebrow-size: 12px; --text-eyebrow-lh: 1.2; --text-eyebrow-ls: 0.12em;

  /* Price */
  --text-price-size: 52px; --text-price-lh: 1;

  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;
}

:root {
  /* 4px base, 8px rhythm */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px;

  --container-max: 1200px;
  --container-gutter: 24px;
  --text-measure: 640px;
  --header-height: 72px;
  --section-y: 96px;
  --section-y-mobile: 64px;

  /* Radii — honest, slightly sharp */
  --radius-sm: 4px;    /* buttons, inputs, chips */
  --radius-md: 8px;    /* small panels, status strip */
  --radius-lg: 12px;   /* cards */
  --radius-full: 999px;

  /* Borders over shadows */
  --border-width: 1px;
  --shadow-hover: 0 1px 2px rgba(30,21,17,0.06), 0 8px 24px rgba(30,21,17,0.08);
  --shadow-float: 0 24px 60px rgba(30,21,17,0.28);

  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 220ms;
}