/* ============================================================================
   Rooted Stack — Design Tokens
   Authoritative source: Claude Design "Instagram Identity System"
   (artifact 6f15c6b1). The Experience Map is the brand: Pin -> Place -> Person.

   RULE: Signal Ochre marks POSITION only (pins). Never a button, background,
   or headline. If ochre appears twice in one frame, one of them is wrong.
   ============================================================================ */
:root {
    /* ---- Core palette (named) ---- */
    --rs-deep-water: #0F3A3E;   /* ink, ocean, type cards, primary actions */
    --rs-deep-water-2: #17494C; /* land on ink, hover fills */
    --rs-ink: #0B2E31;          /* deepest ink, footer */
    --rs-chart-paper: #F4EFE4;  /* default ground / page background */
    --rs-paper-2: #EDE7DA;      /* alt ground, insets */
    --rs-ochre: #E29A2D;        /* THE PIN — reserved for position only */
    --rs-hibiscus: #C2452D;     /* links, live, alerts, danger */
    --rs-sea-glass: #7FB0A6;    /* water, rules, muted teal accent */
    --rs-land-tint: #DDE5DC;    /* map fill on paper, subtle sage panels */

    /* ---- Teal ramp (charts, fills) ---- */
    --rs-teal-900: #0B2E31;
    --rs-teal-800: #0F3A3E;
    --rs-teal-700: #17494C;
    --rs-teal-600: #244C50;
    --rs-teal-500: #2A5457;
    --rs-teal-400: #2E6462;

    /* ---- Neutrals / greige (lines, panels) ---- */
    --rs-line: #D8D2C4;         /* warm hairline */
    --rs-line-soft: #E7E1D4;    /* softest divider */
    --rs-greige: #CFC9BA;
    --rs-surface: #FFFFFF;      /* card surface on paper */
    --rs-surface-sage: #DDE5DC; /* sage inset */

    /* ---- Semantic text (on paper / white) ---- */
    --rs-text: #12333D;         /* primary reading ink */
    --rs-text-strong: #0F3A3E;
    --rs-text-body: #33555A;    /* body copy */
    --rs-text-muted: #586C6F;   /* secondary */
    --rs-text-subtle: #5E7175;  /* tertiary, meta */
    --rs-on-ink: #F4EFE4;       /* text on deep-water */
    --rs-on-ink-muted: rgba(244,239,228,.66);

    /* ---- Semantic roles ---- */
    --rs-action: var(--rs-deep-water);      /* primary button ground */
    --rs-action-hover: var(--rs-deep-water-2);
    --rs-link: var(--rs-hibiscus);          /* text links, live */
    --rs-accent-quiet: var(--rs-sea-glass); /* eyebrows, rules, verified */
    --rs-focus: var(--rs-ochre);            /* focus ring hue */

    /* ---- Typography ---- */
    --rs-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
    --rs-sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --rs-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

    /* Fluid type scale (roles preserve the 1080-canvas ratios) */
    --rs-fs-display: clamp(2.4rem, 1.6rem + 3.6vw, 4rem);   /* place name 96/1.0 */
    --rs-fs-h1: clamp(2rem, 1.4rem + 2.6vw, 3rem);
    --rs-fs-h2: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem);
    --rs-fs-h3: clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem);
    --rs-fs-quote: clamp(1.35rem, 1.05rem + 1.3vw, 2rem);    /* pull-quote 64/1.25 */
    --rs-fs-lead: clamp(1.05rem, 1rem + 0.35vw, 1.2rem);
    --rs-fs-body: 1rem;
    --rs-fs-sm: 0.8125rem;
    --rs-fs-xs: 0.6875rem;
    --rs-fs-coord: 0.75rem;                                   /* mono coordinate */

    --rs-lh-tight: 1.0;      /* headlines */
    --rs-lh-snug: 1.15;
    --rs-lh-quote: 1.25;
    --rs-lh-body: 1.6;
    --rs-track-caps: 0.16em; /* label caps */
    --rs-track-coord: 0.12em;/* coordinates */

    /* ---- Spacing scale (4pt base) ---- */
    --rs-space-1: 4px;
    --rs-space-2: 8px;
    --rs-space-3: 12px;
    --rs-space-4: 16px;
    --rs-space-5: 20px;
    --rs-space-6: 24px;
    --rs-space-8: 32px;
    --rs-space-10: 40px;
    --rs-space-12: 48px;
    --rs-space-16: 64px;
    --rs-space-20: 80px;
    --rs-gutter: clamp(16px, 5vw, 48px);
    --rs-maxw: 1120px;
    --rs-maxw-prose: 660px;

    /* ---- Radius ---- */
    --rs-radius-xs: 3px;
    --rs-radius-sm: 6px;
    --rs-radius-md: 10px;
    --rs-radius-lg: 16px;
    --rs-radius-xl: 22px;
    --rs-radius-pill: 99px;
    --rs-radius-pin: 50% 50% 50% 0;   /* the teardrop pin */

    /* ---- Elevation (deep-water shadows) ---- */
    --rs-shadow-hairline: 0 0 0 .5px rgba(31,30,29,.14);
    --rs-shadow-card: 0 0 0 .5px rgba(31,30,29,.10), 0 2px 10px rgba(0,0,0,.06);
    --rs-shadow-raised: 0 8px 18px rgba(15,58,62,.16);
    --rs-shadow-pop: 0 10px 24px rgba(15,58,62,.20);
    --rs-shadow-float: 0 14px 30px rgba(15,58,62,.24);
    --rs-glow-focus: 0 0 0 4px rgba(226,154,45,.28);   /* ochre focus */
    --rs-glow-pin: 0 0 0 8px rgba(226,154,45,.16);

    /* ---- Motion ---- */
    --rs-ease: cubic-bezier(.2, .7, .3, 1);
    --rs-ease-out: cubic-bezier(0, 0, .2, 1);
    --rs-dur-1: 120ms;
    --rs-dur-2: 200ms;
    --rs-dur-3: 320ms;

    /* ---- Layout chrome ---- */
    --rs-header-h: 64px;
    --rs-z-header: 1200;
    --rs-z-modal: 1400;

    /* ============================================================
       Back-compat aliases — legacy _RootedStackLayout / partials
       reference these. Repointed to the authoritative palette so
       existing markup re-themes with no per-view edits required.
       ============================================================ */
    --ink: var(--rs-deep-water);
    --ink-deep: var(--rs-ink);
    --body: var(--rs-text-body);
    --muted: var(--rs-text-muted);
    --subtle: var(--rs-text-subtle);
    --cream: var(--rs-chart-paper);
    --line: var(--rs-line);
    --green: var(--rs-teal-400);        /* legacy "brand" text accent -> readable teal */
    --green-bright: var(--rs-sea-glass);
    --danger: var(--rs-hibiscus);
    --amber: var(--rs-ochre);
}