/**
 * Rarity Design System — Tokens v1.6
 * Source of truth for all design values.
 * Derived from: design_system/foundations.md
 *
 * Rules:
 * - No raw hex, size, or spacing value appears anywhere else in the system.
 * - All components, templates, and AI prompts consume these variables only.
 * - When a decision changes, update foundations.md first, then this file,
 *   then propagate through components, examples, and outputs.
 *
 * v1.6 (2026-04-27 — updated for clean structure):
 *   - Header and derivation updated to new foundations.md as single source.
 *   - Comments aligned with current folder structure and files
 *     (foundations.md, ai-prompt-guide.md, landing-behaviours.md, usage.md).
 *   - No functional changes to tokens — palette, spacing, type, and behaviours remain locked.
 *
 * v1.5 (2026-04-27 — JJ approved):
 *   - SA Landscape 1 palette LOCKED. All accents and viz colours now
 *     derive from the sunset arc — no green, no blue, no inland red.
 *   - Added two new anchors: --sun-coal and --sun-bone.
 *   - Promoted five semantic accents and three viz palettes.
 *
 * v1.4 (2026-04-27):
 *   - Spacing system locked: 8px base + 4px type half-unit.
 *   - Breakpoints locked.
 */

:root {

  /* ── BACKGROUND ──────────────────────────────────────────── */
  --bg:                #F5F0E8;

  /* ── SURFACE + RULE ──────────────────────────────────────── */
  --surface:           #DDD8C8;
  --rule:              #DDD8C8;

  /* ── TYPE COLOURS (ivory surfaces) ───────────────────────── */
  --heading:           #0F0F0F;   /* Marque + all heading levels on ivory */
  --body:              #484038;
  --subtext:           #B0A890;   /* Default label colour on ivory */
  --ink-warm:          #3A2818;   /* Modal headings; display copy where #0F0F0F reads clinical */
  --subtext-warm:      #8A7A6A;   /* Form labels; meta on ivory needing more contrast than --subtext */

  /* ── TYPE COLOURS (gradient surfaces) ────────────────────── */
  /* For the rarity.au landing/access pages over the sunset gradient. */
  --ivory-70:          rgba(245, 240, 232, 0.70);  /* Nav default, footer */
  --ivory-40:          rgba(245, 240, 232, 0.40);  /* Borders / hairlines */

  /* ── SUNSET ANCHORS ──────────────────────────────────────── */
  /* The single source. Every accent and viz colour below is one  */
  /* of these seven values. No new hues — only tints and shades.  */
  --sun-bone:          #ECD8B6;   /* tint of sand · ramp 1 (lightest) */
  --sun-sand:          #C9A268;   /* sandy gold */
  --sun-amber:         #C49050;   /* warm amber */
  --sun-bronze:        #BF8648;   /* warm bronze · primary accent anchor */
  --sun-rose:          #B06860;   /* rose */
  --sun-deep:          #8A4E48;   /* deep rose · sunset loop anchor */
  --sun-coal:          #4A2422;   /* shade of deep · ramp 7 (darkest) */

  /* Diverging-only auxiliary anchors (do not use for accents):   */
  --sun-rust:          #8E5E30;   /* shade of bronze — diverging +3 */
  --sun-blush:         #E5C5BC;   /* tint of rose — diverging −1   */

  /* ── SEMANTIC ACCENTS ─────────────────────────────────────── */
  /* Each carries one role. Decorative use forbidden.             */
  --accent-primary:    var(--sun-bronze);   /* primary callout · marque underline · send */
  --accent-warm:       var(--sun-rose);     /* warm display · motto highlight */
  --accent-light:      var(--sun-amber);    /* secondary callout · pull-quote */
  --accent-deep:       var(--sun-deep);     /* technical · heavy callout */
  --accent-archive:    var(--sun-coal);     /* archival · seal · end-matter */

  /* Backwards-compatible aliases. New code should use the         */
  /* semantic names above. --accent stays as the primary alias.    */
  --accent:            var(--accent-primary);
  --accent-hover:      #D49858;             /* hover state of --accent-primary */

  /* ── VIZ · CATEGORICAL ───────────────────────────────────── */
  /* Capped at 6 series. Pick non-adjacent stops for fewer series. */
  /* 2-series: 1 + 6.  3-series: 1 + 4 + 6.  4-series: 1, 3, 5, 6. */
  --viz-cat-1:         var(--sun-sand);
  --viz-cat-2:         var(--sun-amber);
  --viz-cat-3:         var(--sun-bronze);
  --viz-cat-4:         var(--sun-rose);
  --viz-cat-5:         var(--sun-deep);
  --viz-cat-6:         var(--sun-coal);

  /* ── VIZ · SEQUENTIAL (light → dark) ─────────────────────── */
  /* For ordered, single-variable data: density, time, yield.     */
  --viz-seq-1:         var(--sun-bone);
  --viz-seq-2:         var(--sun-sand);
  --viz-seq-3:         var(--sun-amber);
  --viz-seq-4:         var(--sun-bronze);
  --viz-seq-5:         var(--sun-rose);
  --viz-seq-6:         var(--sun-deep);
  --viz-seq-7:         var(--sun-coal);

  /* ── VIZ · DIVERGING (− ← 0 → +) ─────────────────────────── */
  /* For data with a meaningful zero: tolerance ±, drift, P/L.    */
  /* Both sides stay inside the sunset family.                    */
  --viz-div-1:         var(--sun-deep);     /* −3 */
  --viz-div-2:         var(--sun-rose);     /* −2 */
  --viz-div-3:         var(--sun-blush);    /* −1 */
  --viz-div-4:         var(--bg);           /*  0 (ivory centre) */
  --viz-div-5:         var(--sun-bone);     /* +1 */
  --viz-div-6:         var(--sun-sand);     /* +2 */
  --viz-div-7:         var(--sun-rust);     /* +3 */

  /* ── SCRIM (overlay backdrop) ────────────────────────────── */
  --scrim:             rgba(20, 20, 22, 0.55);
  --scrim-blur:        4px;

  /* ── DOT GRID — CONTENT SURFACE VARIANT (planned) ────────── */
  /* Mid-grey dots on ivory bg. Static. Not yet shipped.       */
  --dot-colour:        #888888;
  --dot-opacity:       0.50;
  --dot-size:          2px;
  --dot-spacing:       25px;

  /* ── DOT GRID — LANDING VARIANT (live rarity.au) ─────────── */
  /* Ivory dots on sunset gradient. Cursor-responsive physics. */
  --dot-colour-landing:    rgb(245, 240, 232);
  --dot-spacing-landing:   34px;
  --dot-rest-opacity:      0.20;
  --dot-active-opacity:    0.85;

  /* ── FONTS ───────────────────────────────────────────────── */
  --font-marque:       'Sol Heavy', sans-serif;
  --font-heading:      'General Sans', sans-serif;
  --font-body:         'General Sans', sans-serif;
  --font-display:      'Cormorant', serif;        /* Italic only */
  --font-label:        'IBM Plex Mono', monospace;

  /* ── TYPE SCALE ──────────────────────────────────────────── */
  --size-marque-min:   24px;
  --size-marque-max:   120px;
  --size-h1:           28px;
  --size-h2:           18px;
  --size-h3:           13px;
  --size-body:         15px;
  --size-label:        10px;
  --size-motto-min:    28px;      /* Cormorant stroke contrast breaks below this */

  /* ── FONT WEIGHTS ────────────────────────────────────────── */
  /* H1/H2/H3 weights are aspirational — the corresponding cuts */
  /* are in fonts/_library/ but not yet promoted to fonts/.     */
  /* Rendered output for those roles will fall back to 400.     */
  --weight-marque:     900;
  --weight-h1:         700;
  --weight-h2:         600;
  --weight-h3:         600;
  --weight-display:    300;       /* Cormorant variable; 300–500 range */
  --weight-body:       400;
  --weight-label:      400;

  /* ── TRACKING (letter-spacing) ───────────────────────────── */
  --track-marque:     -0.14em;
  --track-h1:         -0.05em;
  --track-h2:          0em;
  --track-h3:          0em;
  --track-body:        0em;
  --track-label:       0.12em;

  /* ── LEADING (line-height) ───────────────────────────────── */
  --leading-body:      1.65;
  --leading-label:     1.5;

  /* ── SPACING ─────────────────────────────────────────────── */
  /* Layout-level spacing. Always a multiple of 8.            */
  /* The 4px half-unit is for type-internal use only          */
  /* (line-height nudges, optical adjustments inside a glyph  */
  /* cluster). Tracking remains in em units, orthogonal.      */
  --space-half:        4px;     /* type-internal only */
  --space-1:           8px;
  --space-2:          16px;
  --space-3:          24px;
  --space-4:          32px;
  --space-6:          48px;
  --space-8:          64px;
  --space-12:         96px;
  --space-16:        128px;
  --space-24:        192px;

  /* ── BREAKPOINTS ─────────────────────────────────────────── */
  /* Govern layout reflow only. The /4 alignment of --bp-sm    */
  /* (640) is intentional — preserves continuity with the      */
  /* shipped rarity.au site.                                   */
  --bp-xs:           480px;
  --bp-sm:           640px;
  --bp-md:           768px;
  --bp-lg:          1024px;
  --bp-xl:          1280px;
  --bp-2xl:         1536px;

  /* ── CALLOUT BORDER ──────────────────────────────────────── */
  --callout-border-width: 3px;

  /* ── LANDING GRADIENT STOPS ─────────────────────────────── */
  /* Sunset gradient confirmed live on rarity.au 2026-04-22.   */
  /* Live assembly is a 6-stop mirror loop using these 4       */
  /* unique colours: deep, rose, sand, amber, rose, deep.      */
  /* Implementation: background-size 100% 400%, 75s linear     */
  /* infinite. First and last stop identical for seamless loop.*/
  --grad-sunset-deep:   #8A4E48;   /* Deep rose — loop anchor  */
  --grad-sunset-rose:   #B06860;   /* Rose                     */
  --grad-sunset-sand:   #C9A268;   /* Sandy gold               */
  --grad-sunset-amber:  #C49050;   /* Warm amber               */

  /* ── VISUALISATION GRADIENTS ────────────────────────────── */
  /* Named gradients for area fills and continuous spatial data.*/
  /* All subsets of the sunset arc.                             */
  --grad-sunset-full:    linear-gradient(90deg, var(--sun-bone), var(--sun-sand), var(--sun-amber), var(--sun-bronze), var(--sun-rose), var(--sun-deep), var(--sun-coal));
  --grad-sunrise:        linear-gradient(90deg, var(--sun-bone), var(--sun-sand), var(--sun-amber), var(--sun-bronze));
  --grad-dusk:           linear-gradient(90deg, var(--sun-bronze), var(--sun-rose), var(--sun-deep), var(--sun-coal));
  --grad-diverging:      linear-gradient(90deg, var(--sun-deep), var(--sun-rose), var(--sun-blush), var(--bg), var(--sun-bone), var(--sun-sand), var(--sun-rust));

}

/* ── DOT GRID UTILITY (content-surface variant) ──────────────── */
.dot-grid {
  background-image: radial-gradient(
    circle,
    rgba(136, 136, 136, var(--dot-opacity)) var(--dot-size),
    transparent var(--dot-size)
  );
  background-size: var(--dot-spacing) var(--dot-spacing);
}