/* ==========================================================================
   Sol Remedy Massage: design tokens
   This is the ONLY file in the project that may contain color values,
   font sizes, weights, families, line heights, or fixed dimensions.
   Components use semantic tokens (--color-*, --text-*, --size-*), never
   raw values. Contrast ratios: see BUILD-PLAN.md, section 4.3.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ---------- Color primitives (7) ---------- */
  --cream-50:  #FBF8F2; /* body text and headings; focus ring */
  --sage-100:  #E4E9DD; /* small text; strong borders and button outlines */
  --sage-700:  #4B5E45; /* dividers (decorative) */
  --sage-800:  #3A4A36; /* raised surface: cards, callouts, panels */
  --sage-850:  #2E3A2B; /* main page background */
  --sage-950:  #1E271C; /* deepest band: header, footer, alternating sections, tags; button text */
  --clay-300:  #E0A68A; /* terracotta, the one accent: logo, buttons, links, labels */

  /* ---------- Semantic color tokens ---------- */

  /* Backgrounds */
  --color-bg:        var(--sage-850);
  --color-bg-alt:    var(--sage-950);
  --color-bg-raised: var(--sage-800);

  /* Text */
  --color-text:       var(--cream-50);
  --color-heading:    var(--cream-50);
  --color-label:      var(--clay-300);
  --color-bullet:     var(--clay-300); /* list bullets */
  --color-error:      var(--clay-300); /* form errors, always with text, never color alone */
  --color-field:      var(--cream-50); /* form field fill */
  --color-on-field:   var(--sage-950); /* text typed into a field */
  --color-link:       var(--clay-300);
  --color-link-hover: var(--cream-50);

  /* Actions */
  --color-action:       var(--clay-300);
  --color-action-hover: var(--cream-50);
  --color-on-action:    var(--sage-950);

  /* Lines, focus, decoration */
  --color-border:        var(--sage-700); /* decorative only */
  --color-border-strong: var(--sage-100); /* UI boundaries, 3:1 or more */
  --color-focus:         var(--cream-50);
  --color-accent-clay:   var(--clay-300);
  --color-selection-bg:   var(--clay-300);
  --color-selection-text: var(--sage-950);

  /* ---------- Typography ---------- */
  --font-serif: "Junge", Georgia, "Times New Roman", serif;
  --font-sans: "Karla", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Fluid modular scale. Base 18px.
     Ratio 1.15 at 320px wide, growing to 1.25 (major third) at 1240px wide.
     Step 4 is left out on purpose so H1 stands clearly above H2. */
  --step--1: clamp(0.9rem, 1.005rem - 0.1361vw, 0.9783rem);    /* 15.7 to 14.4px */
  --step-0:  1.125rem;                                         /* 18px */
  --step-1:  clamp(1.294rem, 1.255rem + 0.1957vw, 1.406rem);   /* 20.7 to 22.5px */
  --step-2:  clamp(1.488rem, 1.394rem + 0.4696vw, 1.758rem);   /* 23.8 to 28.1px */
  --step-3:  clamp(1.711rem, 1.542rem + 0.8457vw, 2.197rem);   /* 27.4 to 35.2px */
  --step-5:  clamp(2.263rem, 1.856rem + 2.036vw, 3.433rem);    /* 36.2 to 54.9px */

  /* The 7 type roles map onto the scale */
  --text-h1:    var(--step-5);
  --text-h2:    var(--step-3);
  --text-h3:    var(--step-2);
  --text-h4:    var(--step-1);
  --text-lead:  var(--step-1);
  --text-body:  var(--step-0);
  --text-label: var(--step--1);

  /* Line heights (4) */
  --leading-tight:   1.15; /* H1, H2 */
  --leading-snug:    1.3;  /* H3, H4, Label, buttons */
  --leading-normal:  1.5;  /* Lead */
  --leading-relaxed: 1.7;  /* Body */

  /* Weights (2). Junge comes in 400 only; Karla loads 400 and 700. */
  --weight-regular: 400;
  --weight-bold:    700;

  /* Letter spacing (3) */
  --tracking-tight:  -0.01em;
  --tracking-normal: normal;
  --tracking-label:  0.12em;

  /* ---------- Spacing (4px base, 9 steps) ---------- */
  --space-1: 0.25rem;  /* 4  */
  --space-2: 0.5rem;   /* 8  */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  --space-9: 6rem;     /* 96 */

  --section-pad: clamp(var(--space-7), 8vw, var(--space-9));

  /* ---------- Layout and component sizes ---------- */
  --container-max: 72rem;
  --prose-max: 68ch;
  --gutter: clamp(var(--space-4), 4vw, var(--space-6));
  --target-min: 44px;

  --size-icon: 1.25em;          /* inline icons scale with their text */
  --size-icon-menu: 2rem;       /* the menu (hamburger) icon on phones and tablets */
  --size-mark: 2.25rem;         /* logo width; the arch is 40:48, so it stands 2.7rem tall */
  --size-card-min: 17rem;       /* narrowest card column */
  --size-tile-min: 10rem;       /* narrowest swatch or thumbnail column */
  --size-headshot-max: 26rem;   /* arched portrait photos */
  --size-header-offset: 6rem;   /* room kept above focused items and jump targets so the sticky header never covers them */

  /* Photo aspect ratios (3) */
  --ratio-wide: 3 / 2;          /* hero, gallery, finding-us photos */
  --ratio-card: 4 / 3;          /* service card photos */
  --ratio-portrait: 4 / 5;      /* arched portraits, side photos */

  /* ---------- Lines and shape ---------- */
  --border-thin: 1px;
  --border-thick: 2px;
  --focus-width: 3px;
  --focus-offset: 3px;
  --underline-offset: 0.25em;
  --stroke-icon: 1.75;          /* SVG line icons */
  --stroke-mark-frame: 1.1;     /* logo arch frame: 1px at the 2.25rem logo size */

  /* Two radii only. 12px softens every corner, buttons and tags
     included, without reading as a pill. The arch is for photos. */
  --radius: 12px;
  --radius-arch: 999px 999px var(--radius) var(--radius);

  /* ---------- Motion ---------- */
  --ease-calm: cubic-bezier(0.33, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-slow: 400ms;
  --duration-reveal: 700ms;     /* scroll reveal fade and rise */
  --reveal-distance: var(--space-6); /* how far content rises as it appears (32px) */
  --reveal-stagger: 90ms;       /* delay between items in the same row */
  --parallax-strength: 0.06;    /* photos drift at 6% of scroll offset; read by main.js */

  /* ---------- Section curves ---------- */
  --curve-depth: clamp(var(--space-5), 5vw, var(--space-8)); /* 24 to 64px dome at the top of each section */
}