/* Palm House Gems: design tokens.
   Every colour, font, size, space and motion value on the page comes from this file.
   Change a value here and the whole page follows. halo.js reads the ring colours
   and motion times from here too. */

:root {
  /* Ground. The page starts white; the rings turn it maroon. */
  --color-start: #ffffff;
  --color-maroon: #550000;        /* T's starting maroon (2026-10-20) */
  --color-maroon-deep: #2b0004;   /* where the colour arrives at the end of the page */

  /* Rings, outer (1) to centre (7). Graduated like Turrell's Aten Reign:
     each ring a little lighter and warmer towards the centre.
     "light" is the colour at the top of the page, "deep" at the bottom. */
  --ring-light-1: #550000;
  --ring-light-2: #5a0304;
  --ring-light-3: #610708;
  --ring-light-4: #690c0c;
  --ring-light-5: #721211;
  --ring-light-6: #7b1816;
  --ring-light-7: #841e1b;
  --ring-deep-1: #2b0004;
  --ring-deep-2: #320207;
  --ring-deep-3: #3a050a;
  --ring-deep-4: #42090e;
  --ring-deep-5: #4b0e12;
  --ring-deep-6: #541317;
  --ring-deep-7: #5d181b;
  --ring-glow: #e8786a;           /* warm light at the inner edge of each band */
  --ring-glow-amount: 0.09;       /* 0 = flat bands, higher = brighter inner edges */

  /* Text on maroon. Lowest contrast is cream-soft text on the lit centre ring: about 6:1. Body text about 8:1. */
  --color-text: #fbf4ef;          /* about 15:1 on #550000 */
  --color-text-soft: #e8d5d0;
  --color-line: rgba(251, 244, 239, 0.28);
  --color-field-line: rgba(251, 244, 239, 0.6);  /* form field borders, above 3:1 */
  --color-field-bg: rgba(251, 244, 239, 0.07);
  --color-button: #fbf4ef;
  --color-button-ink: #550000;
  --color-button-hover: #ffffff;

  /* Emerald: used sparingly so it stands out. Light enough to separate from maroon
     by lightness, not only by hue (red-green colour blindness). About 9:1 on #550000. */
  --color-emerald: #5fd0a0;
  --color-error: #ffc2b3;
  --color-success: var(--color-emerald);

  /* Type: classical serif display beside a modern, legible text face.
     Cormorant Garamond is used where installed; real font files come with R0. */
  --font-display: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --font-text: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --size-eyebrow: 0.8rem;
  --size-body: 1.125rem;          /* 18 px: comfortable on light-on-dark */
  --size-small: 0.95rem;
  --size-h3: 1.4rem;
  --size-h2: clamp(1.8rem, 1.4rem + 1.6vw, 2.5rem);
  --size-h1: clamp(2.1rem, 1.4rem + 3.2vw, 3.6rem);
  --size-wordmark: clamp(2.4rem, 1.4rem + 5vw, 4.75rem);

  --leading-body: 1.7;            /* light text on dark ground needs a little more air */
  --leading-tight: 1.15;
  --tracking-eyebrow: 0.16em;
  --tracking-wordmark: 0.06em;

  /* Space and layout */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --space-7: 7rem;
  --measure: 36rem;               /* line length for reading */
  --gutter: 1.25rem;              /* side margin on phones */
  --radius-pill: 999px;
  --radius-field: 14px;
  --tap: 48px;                    /* minimum tap target */

  /* Motion. Slow to medium, never anxious. */
  --easing: cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration: 260ms;              /* hovers */
  --reveal: 1100ms;               /* text appearing */
  --intro-ring: 2600;             /* ms for one ring to bloom (read by halo.js) */
  --intro-stagger: 380;           /* ms between rings (read by halo.js) */
  --breathe: 0.03;                /* how far rings swell and settle (read by halo.js) */
}

@media (min-width: 48rem) {
  :root { --gutter: 2.5rem; --size-body: 1.1875rem; }
}