/*
 * Solar Second Life design tokens.
 *
 * The ONLY place colours, fonts and brand values are defined. Every other
 * stylesheet, the PWA manifest colours and the email templates read from these.
 * Swapping the brand is a change to this file and assets/img/logo.svg, nothing else.
 *
 * PALETTE A, "teal and coral" (chosen 27 September 2026). Chosen to stand apart
 * from navy and amber, which a similarly named US company uses.
 * Ratios measured with the WCAG 2.1 formula. AA needs 4.5:1 for body text,
 * 3:1 for large text (24px, or 18.66px bold) and UI components (borders, focus, state).
 * If any colour changes, re-measure and update these comments.
 */

:root {
  /* --- Colour --------------------------------------------------------- */

  /* Text */
  --c-ink:        #14252B;  /* on --c-canvas 15.80:1, on --c-surface 14.30:1, on --c-accent 6.15:1 */
  --c-ink-soft:   #475A61;  /* secondary text. on --c-canvas 7.23:1, on --c-surface 6.55:1 */

  /* Backgrounds */
  --c-canvas:     #FFFFFF;
  --c-surface:    #F7F3EE;  /* warm off-white for alternating sections */

  /* Brand: deep teal */
  --c-brand:      #0E5766;  /* text/links on --c-canvas 8.16:1, on --c-surface 7.39:1; --c-canvas text on it 8.16:1 */
  --c-brand-deep: #093640;  /* hero and footer fill. --c-canvas on it 13.02:1 */
  --c-on-deep-soft: #C4DDE2; /* secondary text on --c-brand-deep 9.17:1 */

  /* Accent: coral. FILL ONLY on light backgrounds (on --c-canvas it is 2.57:1,
     a fail for text and for state indicators). Put --c-ink on it (6.15:1).
     On --c-brand-deep it may be text, icon or focus colour (5.07:1). */
  --c-accent:      #FF7A59;
  --c-accent-soft: #FFE9E2;  /* notice and icon backgrounds. --c-ink on it 13.55:1 */
  /* Deeper coral for state indicators on light backgrounds (current menu item):
     on --c-canvas 3.91:1, on --c-surface 3.54:1 (needs 3:1). Not for body text. */
  --c-accent-strong: #D9573A;
  --c-link-on-deep: #FFB4A0; /* links in hero and footer. on --c-brand-deep 7.62:1 */

  /* States */
  --c-leaf:       #256B45;  /* success, "Revived". on --c-canvas 6.43:1, on --c-leaf-soft 5.59:1 */
  --c-leaf-soft:  #E6F2EA;
  --c-danger:     #B42318;  /* errors. on --c-canvas 6.57:1, on --c-danger-soft 5.75:1 */
  --c-danger-soft: #FDECEA;

  /* Lines */
  --c-line:       #DDD6CE;  /* decorative dividers only, not for UI boundaries */
  --c-field:      #5E7278;  /* form field borders. on --c-canvas 5.06:1 (needs 3:1) */

  /* Focus: brand ring on light areas, coral ring on deep areas */
  --c-focus:         var(--c-brand);
  --c-focus-on-deep: var(--c-accent);

  /* --- Type ----------------------------------------------------------- */

  /* System fonts: no font download, no third-party request. */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --fs-body:  1rem;       /* 16px minimum body size */
  --fs-small: 0.9375rem;  /* 15px, meta text only, never body copy */
  --fs-lead:  1.1875rem;
  --fs-h3:    1.25rem;
  --fs-h2:    clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
  --fs-h1:    clamp(2rem, 1.4rem + 3vw, 3.25rem);
  --lh-body:  1.6;
  --lh-tight: 1.2;

  /* --- Layout --------------------------------------------------------- */

  --container:  72rem;
  --measure:    42rem;    /* one shared reading width. rem, not ch (see TECH-SPEC 9) */
  --gutter:     1rem;     /* 16px side gutter on phones */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;

  --radius:     0.5rem;
  --radius-lg:  0.875rem;
  --tap:        2.75rem;  /* 44px minimum tap target */
  --shadow:     0 1px 2px rgba(20, 37, 43, 0.06), 0 4px 16px rgba(20, 37, 43, 0.06);

  /* PWA and email mirror these two; keep them in step with the manifest. */
  --theme-colour: var(--c-brand-deep);
  --email-accent: var(--c-brand);
}