/* tokens.css — design-token system.
   M62: every value is the exact current literal extracted from the former
   inline <style> blocks. No near-duplicates merged (e.g. the two creams
   #faf6ee / #faf7f2 are kept distinct). Fluid/clamp() type is deliberately
   out of scope — these hold the current STATIC values only. */

@layer tokens {
  :root {

    /* ── Fonts ── */
    --font-serif: Fraunces, 'Iowan Old Style', 'Apple Garamond', Georgia, serif;
      /* was: 'Georgia','Times New Roman',serif */

    /* ── Font sizes (static; numeric suffix = rem value ×100) ── */
    --fs-90:  .9rem;
    --fs-95:  .95rem;
    --fs-100: 1rem;
    --fs-125: 1.25rem;
    --fs-145: 1.45rem;

    /* ── Status / destructive colors (WCAG carve-outs) ── */
    --color-bg-delete-hover: #F5E8E0;
    --color-delete:          #9C4530;
    --color-delete-strong:   #7A3725;
    --color-delete-border:   #8C3A28;
    --color-border-delete:   #C9A188;
    --color-retro:           #9C4530;  /* transit retrograde domain marker */

    /* ── Reports planet-chip palette (M85) ── */
    --color-bg-chip:              #EEF2EC;
    --color-bg-chip-indeterminate:#DDE5DA;
    --color-border-chip:          #CDD1C3;
    --color-border-chip-dashed:   #6A8270;

    /* ── Cross-surface domain colors ── */
    --color-blue: #4A6A7A;  /* synastry Person-B + reports planet-chip checked */

    /* ── Toast semantic tokens — transient-feedback domain carve-outs (M88 close). ── */
    --color-toast-error: #8C3A28;
    --color-toast-info:  #4F6650;
    --shadow-toast: 0 4px 14px rgba(0,0,0,.18);

    /* ── Shadows ── */
    --shadow-tooltip:    0 2px 8px rgba(0,0,0,.18);
    --shadow-dropdown-sm:0 4px 12px rgba(0,0,0,.1);

    /* ── Radii (domain carve-outs) ── */
    --radius-3xs:    3px;   /* synastry provenance badges */
    --radius-xs:     4px;   /* synastry tab-indicator + chord bar */
    --radius-2xl:   12px;   /* M85 reports planet-chip pill */
    --radius-pill-sm:20px;  /* synastry chip borders */
    --radius-pill:  999px;  /* home.css CTA pill (M80) */

    /* ── Motion ── */
    --dur-fast: 120ms; --dur-mid: 220ms; --dur-slow: 360ms;
    --ease: cubic-bezier(.2, .0, .2, 1);
    --ease-spring: cubic-bezier(.34, 1.2, .64, 1);
    --dur-reveal: 480ms;

    /* ── z-index scale ── */
    --z-sticky: 100;
    --z-header: 200;
    --z-popover: 300;
    --z-overlay: 800;
    --z-toast: 2000;

    /* ── Spacing scale (M63) ── */
    --space-3xs: .125rem;
    --space-2xs: .25rem;
    --space-xs:  .5rem;
    --space-sm:  .75rem;
    --space-md:  1rem;
    --space-lg:  1.5rem;
    --space-xl:  2.5rem;
    --space-2xl: 4rem;
    --space-3xl: 6rem;
    --space-fluid: clamp(1.5rem, 1rem + 3vw, 4rem);

    /* ── Page-container layout (M74) ── */
    --page-max: 70rem;                            /* 1120px — unified width matching --syn-view-max so header + all mode views share the same container (M100 rework: +20px) */
    --form-max: 40rem;                            /* 640px — narrow entry surfaces (natal/synastry form) */
    --gutter: clamp(1rem, 0.5rem + 3vw, 2rem);   /* fluid side padding applied to all page sections */

    /* ── Chart-wheel surface (M66) ── */
    --chart-svg-max: 861px;

    /* ── App-header height (M68) — drives sticky top offsets ── */
    --header-h: 60px; /* mobile: hamburger (44px) + top/bottom padding (8px×2) */

    /* ── Reports surface (M68 / M85) ── */
    --color-rpt-status-error: #8C3A28;  /* inline save-fail red; Lean B terracotta-rust family */

    /* ── Report print surface (M105) — the standalone HTML report document.
       Sizes are pt-based so the screen sheet and the printed page match. ── */
    --report-sheet: #ffffff;
    --shadow-report-sheet: 0 2px 12px rgba(0,0,0,.06);
    --report-font-serif: Georgia, 'Times New Roman', serif;
    --report-font-sans: Arial, Helvetica, sans-serif;
    --report-heading: #354F43;  /* page titles, subheads and meta lines, the study's green */
    --report-text: #28352E;  /* prose, the study's dark green-grey */
    --report-fs-h1:     21pt;
    --report-fs-h2:     16pt;
    --report-fs-h3:     12.5pt;
    --report-fs-h3-aspect: 10.5pt;   /* the widest aspect title (711px at 12.5pt, measured 2026-10-14) holds one line of the 610px title column */
    --report-fs-body:   11pt;
    --report-fs-note:   10pt;
    --report-fs-intro:  12pt;   /* the introduction page, a size up from the body (M148) */
    --report-fs-caption: 10.5pt;  /* chart captions on the distribution sheets, the two-page study (M143) */
    --report-fs-small:  9pt;
    --report-fs-footer: 8pt;
    --report-lh: 1.409;                                           /* body line-height: the dominants study's 15.5pt on 11pt (M142) */
    --report-line: calc(var(--report-fs-body) * var(--report-lh));   /* one body line, about 21px */
    --report-gap-para: 4pt;                                       /* between the paragraphs of a block, the study's 4pt */
    --report-gap-block: calc(1.5 * var(--report-line));           /* between two blocks, in total: a line and a half, so each block reads as its own unit without the page going loose (M148) */

    /* ── Report page (M106) — the in-app report mode: sheet geometry and editor column. ── */
    --report-sheet-w: 794px;              /* A4 at 96 dpi */
    --report-sheet-h: 1123px;
    --report-sheet-pad-top: 64px;
    --report-sheet-pad-inline: 64px;
    --report-sheet-pad-bottom: 64px;
    --report-sheet-gap: 30px;
    --report-cover-wheel-max: 520px;      /* cover wheel cap so the cover fits one sheet (M112) */
    --report-orb-w: 3.6em;                /* aspects-page orb column, e.g. "10.6°" */
    --report-stars-w: 5.6em;              /* aspects-page stars column: five star slots */
    --report-editor-w: 340px;              /* outline pane from 1280px */
    --report-editor-w-narrow: 280px;      /* outline pane from 1024px to 1279px */
    --report-locate-w: 2px;               /* preview locate highlight ring */
    --report-fs-running: 8pt;           /* running header and footer */
    --report-rule-w: 1px;                 /* sheet running-header and footer rules */
    /* ── Report builder (M112) — meter, stub, tools, cover ── */
    --report-star:             var(--primary);          /* filled star, meter fill fallback */
    --report-star-off:         #CFD3C6;                 /* empty star, meter track */
    --report-nature-harmonious:#3A7A5A;                 /* trine, sextile */
    --report-nature-tense:     var(--signature-coral);  /* square, opposition */
    --report-nature-neutral:   var(--muted);            /* conjunction, placements, sign and house transits */
    --report-em-fire:          #CC8068;                 /* elements pie, matches ELEM_STROKE (M115) */
    --report-em-earth:         #A8CCA0;
    --report-em-air:           #C0A0DD;
    --report-em-water:         #A0B8DD;
    --report-em-cardinal:      #D8B48A;                 /* modes pie */
    --report-em-fixed:         #8FA89A;
    --report-em-mutable:       #A9B8CF;
    --report-em-gap:           #FFFFFF;                 /* slice separator, the paper */
    --report-em-pie:           180px;                   /* pie width on the sheet */
    --report-em-pie-wide:      166pt;                   /* quadrants pie, the two-page study (M143) */
    --report-em-pie-col:       112pt;                   /* elements and modes pies in their columns (M143) */
    --report-em-rule:          #D6DED4;                 /* rule under the column charts, the study's */
    --report-quad-ne:          #D8B48A;                 /* quadrants pie (M116) */
    --report-quad-nw:          #8FA89A;
    --report-quad-sw:          #A0B8DD;
    --report-quad-se:          #C0A0DD;
    --report-dom-bar:          #A9B8A3;                 /* dominant planets bars */
    --report-dom-top:          var(--primary);          /* the leading three */
    --report-dom-track:        #EEF0E8;                 /* empty bar track */
    --report-stub-bg:          var(--surface-strong);   /* excluded block */
    --report-stub-border:      var(--hairline);         /* excluded block, dashed */
    --report-tool-h:           44px;                    /* block tool buttons, hover row */
    --report-meter-w:          64px;                    /* bar meter track */
    --report-meter-h:          6px;
    --report-fs-cover-name:    34.5pt;                  /* 46px cover name */
    --report-cover-mark:       34px;                    /* mark in the cover band */
    --report-foot-mark:        16px;                    /* mark in the footer */

    /* ── Astrocartography surface (M110) ── */
    --astro-ocean:        var(--canvas);          /* map background */
    --astro-land:         var(--surface-strong);  /* land fill */
    --astro-land-stroke:  var(--hairline);        /* coastlines */
    --astro-graticule:    var(--hairline);        /* 30° grid */
    --astro-line-w:       2px;                    /* MC and IC lines */
    --astro-line-w-thin:  1.5px;                  /* AC and DC curves */
    --astro-hit-w:        14px;                   /* invisible hit stroke */
    --astro-marker-r:     6px;                    /* place marker radius */
    --astro-map-max-h:    72vh;                   /* map height cap on desktop */
    --astro-panel-w:      320px;                  /* reading panel from 1024px */

    /* ── Synastry surface (M69 / M84) ── */
    /* Aspect-type color family — drives .syn-chip.{type}.active, .syn-aspect-{type} classes, chord colours */
    --color-aspect-conjunction: #888888;
    --color-aspect-sextile:     #2277cc;
    --color-aspect-square:      #cc3333;
    --color-aspect-trine:       #228833;
    --color-aspect-opposition:  #cc2266;
    /* Synastry-specific palette */
    --color-syn-aspect-name:  #3a3060;
    --color-syn-resolved-ok:  #2a6a2a;
    --color-syn-clear-bg:     #e8e0d4;
    --color-syn-tag-a-text:   #5a3a8a;
    --color-syn-tag-a-bg:     #e8e0f0;
    --color-syn-tag-b-bg:     #e8eef8;
    --color-border-syn-chip:  #c8b090;
    --shadow-syn-card: 0 2px 12px rgba(0,0,0,.06);
    /* Provenance badge colours */
    --color-prov-hand-bg:              #d4e4f0;
    --color-prov-ai-bg:                #ffe8cc;
    --color-prov-ai-text:              #7a4a10;
    --color-prov-ai-paraphrase-bg:     #fff0b0;
    --color-prov-ai-paraphrase-text:   #6a5a10;
    --color-prov-catherine-bg:         #e4d4f0;
    --color-prov-catherine-text:       #3a1a5a;
    --color-prov-verified-yes-bg:      #d4f0d4;
    --color-prov-verified-yes-text:    #1a5a1a;
    --color-prov-verified-no-bg:       #fff0cc;
    --color-prov-verified-no-text:     #8a6010;
    /* Synastry-specific sizing */
    --syn-view-max:      1120px;
    --syn-chart-max:     1025px;
    --syn-dropdown-max-h:240px;
    --syn-chord-hit-w:   14px;   /* invisible hit stroke over each chord */
    --syn-row-min-h:     44px;   /* aspect row and picker option height */
    --syn-wheel-vb:      1000;   /* bi-wheel viewBox side, unitless */

    /* ── Clients surface (M70) ── */
    --clients-search-max-w:   380px;
    --ce-city-dropdown-max-h: 200px;

    /* ── Numerology surface (M109) ── */
    --num-tile-min-h:        180px;  /* result tile floor from 640px */
    --num-tile-min-h-mobile: 140px;  /* result tile floor below 640px */

    /* ── Form system (M111) — control surface, boundary, focus, placeholder ── */
    --field-surface: #FFFFFF;          /* input, select, textarea, .form-card */
    --field-border:  #858D80;          /* 3.43:1 on white, 3.07:1 on canvas */
    --focus-ring:    var(--primary);   /* :focus-visible outline everywhere */
    --placeholder:   var(--muted);     /* ::placeholder, 5.61:1 on white */

    /* ════════════════════════════════════════════════════════════════════
       M78 — Airtable rebrand arc, token foundation
       ────────────────────────────────────────────────────────────────────
       This cluster adds Airtable design tokens alongside the legacy
       --color-* / --fs-* / --radius-* / --space-* scales above. Both
       clusters are LIVE during the M78–M86 arc — surface CSS files are
       migrated per-blueprint in M79–M86. No call site references these
       new tokens yet at M78 close.

       Naming convention:
       - Airtable colors:  un-prefixed semantic names (--canvas, --ink,
         --signature-*, --primary, --link, --info, --success). The legacy
         --color-* cluster is unchanged.
       - Airtable radii:   --at-radius-* (prefixed, the rung names xs/sm/
         md/lg/pill collide with legacy --radius-* at different px values).
       - Airtable spacing: --at-space-* ONLY for rungs the legacy --space-*
         scale does not carry exactly (32px, 48px). The 4/8/12/16/24/96px
         Airtable rungs reuse existing --space-* names.
       - Typography sizes: --fs-* numeric suffix convention preserved;
         new rungs --fs-875 / --fs-1125 / --fs-150 / --fs-200 / --fs-250 /
         --fs-300 extend the existing ladder.
       - Font families: --font-airtable-display / --font-airtable-text
         both resolve to system-ui fallback (no Haas license, no webfont).

       Inviolables preserved:
       - 1rem input font-size floor (project rule): Airtable's 14px body
         applies to MARKETING TYPE only. Input / select / textarea
         elements MUST use --fs-100 (1rem) or larger. M82+ enforces.
       - Bilingual parity, modular blueprint architecture, no emoji:
         untouched by M78.

       M88 sweeps unused legacy tokens after every surface has migrated.
       ════════════════════════════════════════════════════════════════════ */

    /* ── Airtable rebrand (M78) — Colors ── */
    /* Brand & primary */
    --primary:        #4F6650;  /* was #181d26 — Lean B accent (deep sage) */
    --primary-active: #3F5640;  /* was #0d1218 — Lean B accent-hover */
    /* Text */
    --ink:            #1B1F1A;  /* was #181d26 — Lean B ink (charcoal with green undertone) */
    --body:           #1B1F1A;  /* was #333840 — collapse to --ink (Lean B has no separate "body" tier) */
    --muted:          #5F6B5C;  /* was #41454d — Lean B muted (sage-gray) */
    --border-strong:  #9CA398;  /* was #9297a0 — Lean B-harmonic disabled-outline tone */
    /* Surfaces */
    --canvas:               #F4F2EC;  /* was #ffffff — Lean B chalk canvas (THE BIG VISUAL FLIP) */
    --surface-soft:         #EEEFE7;  /* was #f8fafc */
    --surface-strong:       #E8EAE0;  /* was #e0e2e6 — Lean B's --surface (pale moss) */
    --surface-dark:         #1B1F1A;  /* was #181d26 — same as new --ink */
    --surface-dark-elevated:#272B26;  /* was #1d1f25 — slightly elevated near-black */
    --hairline:             #CDD1C3;  /* was #dddddd — Lean B pale moss-gray hairline */
    /* Signature card surfaces (brand voltage) */
    --signature-coral:   #9C4530;  /* was #aa2d00 — warm rust, harmonises with Lean B */
    --signature-forest:  #1F3424;  /* was #0a2e0e — deeper sage than --primary */
    --signature-cream:   #EFE9DA;  /* was #f5e9d4 — slightly cooler cream, sits in Lean B's chalk family */
    --signature-peach:   #fcab79;
    --signature-mint:    #a8d8c4;
    --signature-yellow:  #f4d35e;
    --signature-mustard: #d9a441;
    /* On-* */
    --on-primary: #ffffff;  /* unchanged */
    --on-dark:    #ffffff;  /* unchanged */
    /* Semantic */
    --link:          #4F6650;  /* was #1b61c9 — links carry brand accent */
    --link-active:   #3F5640;  /* was #1a3866 — link hover/active = accent-hover */
    --info:          #5F6B5C;  /* was #254fad — info uses muted (neutral notification) */
    --info-border:   #CDD1C3;  /* was #458fff — info border = hairline */
    --success:       #4F6650;  /* was #006400 — Lean B spec: success = accent */
    --success-border:#3F5640;  /* was #39bf45 — slightly darker green for border */
    --pricing-ink:   #1d1f25;  /* reserved; no pricing surface in this app, kept for lift fidelity */

    /* ── Airtable rebrand (M78) — Typography ── */
    --fs-875:  0.875rem; /* 14px — Airtable body-md; below 1rem input floor; marketing type only */
    --fs-1125: 1.125rem; /* 18px — Airtable title-sm */
    --fs-150:  1.5rem;   /* 24px — Airtable title-lg */
    --fs-display-lg: clamp(2.5rem, 6vw, 4rem); /* numerology tile hero number — display-scale, fluid */
    --fs-200:  2rem;     /* 32px — Airtable display-md */
    --fs-250:  2.5rem;   /* 40px — Airtable display-lg */
    --fs-300:  3rem;     /* 48px — Airtable display-xl */
    --font-airtable-display: Geist, "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      /* was: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif */
    --font-airtable-text:    Geist, "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      /* was: identical system-ui chain — same swap as --font-airtable-display */

    /* ── Airtable rebrand (M78) — Radii ── */
    --at-radius-xs:   2px;     /* cookie/legal CTA */
    --at-radius-sm:   6px;     /* text inputs */
    --at-radius-md:   10px;    /* content cards, article cards, cream callouts */
    --at-radius-lg:   12px;    /* primary CTA, signature cards, tabbed feature cards */
    --at-radius-pill: 9999px;  /* pricing CTAs, sub-system signal */
    /* Full circles reuse the legacy --radius-pill (already 999px); no --at-radius-full needed. */

    /* ── Airtable rebrand (M78) — Spacing ── */
    --at-space-xl:  2rem;  /* 32px — Airtable spacing.xl */
    --at-space-xxl: 3rem;  /* 48px — Airtable spacing.xxl */
    /* The 4/8/12/16/24/96 px Airtable rungs are exact matches to existing
       --space-2xs (4px) / --space-xs (8px) / --space-sm (12px) /
       --space-md (16px) / --space-lg (24px) / --space-3xl (96px) —
       M79+ uses those directly with no rename.
       Note: legacy --space-xl is 2.5rem (40px) — does NOT match Airtable's
       32px xl. The prefixed --at-space-xl resolves the collision. */

  }

  @media (min-width: 1024px) {
    :root { --header-h: 48px; } /* desktop: tallest header element ~29px + 8px×2 padding */
  }
}