/* TradieRing design tokens (2026-10-29). Brief: .design/tradiering/DESIGN_BRIEF.md
   Direction "Bluestone and the green button": Melbourne bluestone as ink and dark surface, a cool concrete page,
   and one accent, the green of a phone's answer button (the product is "the call gets answered").
   Marker yellow appears only as the "urgent" flag inside mockups.

   Fonts:
   - Archivo, expanded and heavy (wdth 112-125, wght 800): reads like van-door signwriting, wide and confident, the way
     tradies letter their utes. Headings and the wordmark only.
   - Atkinson Hyperlegible Next: designed for legibility (Braille Institute), so body text holds up on a cracked phone
     screen in full sun on site. Body, forms, the SMS mockup.
   Light page only (showcase rule); the dark bluestone bands are deliberate surfaces, not a dark mode. */

:root {
  /* Raw palette */
  --bluestone-900: #15191c;   /* darkest, footer */
  --bluestone-800: #1f2529;   /* ink, dark bands */
  --bluestone-700: #2e363c;
  --bluestone-500: #59646c;   /* secondary text on light (5.9:1 on concrete-100) */
  --bluestone-300: #a3adb3;
  --concrete-50:  #f7f8f6;
  --concrete-100: #eef0ed;    /* page */
  --concrete-200: #e1e5e1;    /* wells, inputs */
  --concrete-300: #cdd3ce;    /* hairlines */
  --answer-600: #11804a;      /* accent on light: buttons (white text 5.0:1) */
  --answer-700: #0c6a3c;      /* hover / pressed */
  --answer-400: #3ccf7f;      /* accent on bluestone (8.6:1 on #1f2529) */
  --answer-100: #d9f2e4;      /* soft tint */
  --marker: #ffd23f;          /* urgent flag only */
  --missed: #c8361f;          /* missed-call red, problem section only (5.0:1 on concrete-100) */

  /* Semantic colour */
  --color-bg-primary: var(--concrete-100);
  --color-bg-secondary: var(--concrete-50);
  --color-bg-tertiary: var(--concrete-200);
  --color-bg-inverse: var(--bluestone-800);
  --color-text-primary: var(--bluestone-800);
  --color-text-secondary: var(--bluestone-500);
  --color-text-inverse: #f2f4f1;
  --color-text-inverse-secondary: #b7c0c5;
  --color-text-link: var(--answer-700);
  --color-border-primary: var(--concrete-300);
  --color-border-strong: var(--bluestone-800);
  --color-border-focus: var(--answer-600);
  --color-accent-primary: var(--answer-600);
  --color-accent-primary-hover: var(--answer-700);
  --color-accent-on-dark: var(--answer-400);
  --color-status-error: #b3261e;
  --color-status-success: var(--answer-700);

  /* Type */
  --font-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display-stretch: 118%;
  --text-xs: 0.875rem;    /* 14 */
  --text-sm: 0.9375rem;   /* 15 */
  --text-base: 1.0625rem; /* 17, body on phones */
  --text-lg: 1.25rem;     /* 20 */
  --text-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --text-2xl: clamp(1.875rem, 1.3rem + 2.6vw, 3.25rem);
  --text-hero: clamp(2.375rem, 1.4rem + 4.6vw, 5rem);
  --leading-tight: 1.02;
  --leading-snug: 1.2;
  --leading-body: 1.55;

  /* Space (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --section-y: clamp(4rem, 2.5rem + 6vw, 8rem);
  --gutter: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
  --max: 72rem;

  /* Radii: small and consistent. Phone mockups are the only big radius (they are phones). */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-phone: 2.5rem;
  --radius-bubble: 1.125rem;

  /* One shadow, for the phone mockup only */
  --shadow-phone: 0 30px 60px -20px rgba(21, 25, 28, 0.35), 0 12px 24px -12px rgba(21, 25, 28, 0.25);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 140ms;
  --dur-slow: 520ms;

  /* Components */
  --tap: 3rem;            /* 48px min tap target */
  --btn-radius: var(--radius-sm);
}