/* Newton Explorer token contract.
   Source: explorer-newton/src/globals.css (Labs reskin).
   Suisse Intl is the licensed brand face; Inter stands in until it's
   licensed for web. JetBrains Mono stands in for Suisse Intl Mono.
   Components this demo has and Explorer does not — verdict washes, the
   coverage disc, the hop rail — use these tokens. No extra steps.

   Fallback metrics, computed from the shipped files against local Arial
   (unitsPerEm 2048, average advance of a–z A–Z 0–9 = 1185.9355).
   size-adjust = (faceAvg / faceUPM) / (arialAvg / 2048).
   ascent/descent/line-gap overrides are the face's typo metrics
   (USE_TYPO_METRICS) as a percentage of the size-adjusted em.
   Inter: avg 1241.7581 / 2048, ascent 1984, descent 494, line gap 0.
   JetBrains Mono: avg 600 / 1000, ascent 1020, descent 300, line gap 0. */

@font-face{
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: "Inter Fallback";
  src: local("Arial");
  size-adjust: 104.71%;
  ascent-override: 92.52%;
  descent-override: 23.04%;
  line-gap-override: 0%;
}
@font-face{
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/jetbrains-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: "JetBrains Mono Fallback";
  src: local("Arial");
  size-adjust: 103.61%;
  ascent-override: 98.44%;
  descent-override: 28.95%;
  line-gap-override: 0%;
}

:root{

  /* ── Tier 1 · Primitives ───────────────────────────────────
     Only the ramp steps tier 2 references: bone, ink, leaf, ruby, gold, white. */

  --bone-50: #FBFCFE;
  --white: #FFFFFF;

  --ink-10: #F5F5F6;
  --ink-30: #E3E3E4;
  --ink-50: #9A9A9B;
  --ink-60: #737374; /* tertiary text; darker than ink-50 so it clears 4.5:1 on bone */
  --ink-70: #6B6B6C;
  --ink-100: #0E0E0F;

  --leaf-10: #E6F2EE;
  --leaf-50: #0B6E4F;
  --leaf-70: #095A41;

  --ruby-10: #FBE9E3;
  --ruby-50: #AD2B03;
  --ruby-70: #8F2402;

  --gold-10: #FCF4E5;
  --gold-70: #8A5E14;

  /* ── Tier 2 · Semantic ─────────────────────────────────────
     Surfaces, text, accent, focus, and the four outcome tones. */

  --color-surface: var(--bone-50);
  --color-surface-raised: var(--white);
  --color-surface-sunken: var(--ink-10);

  --color-border: var(--ink-30);
  --color-border-strong: var(--ink-70);

  --color-text: var(--ink-100);
  --color-text-secondary: var(--ink-70);
  --color-text-tertiary: var(--ink-60);
  --color-text-disabled: var(--ink-50);

  --color-accent: var(--ink-100);
  --color-accent-hover: color-mix(in srgb, var(--white) 18%, var(--ink-100));
  --color-on-accent: var(--white);
  --color-focus-ring: var(--ink-100);

  --tone-pass-wash: var(--leaf-10);
  --tone-pass-edge: var(--leaf-50);
  --tone-pass-text: var(--leaf-70);

  --tone-block-wash: var(--ruby-10);
  --tone-block-edge: var(--ruby-50);
  --tone-block-text: var(--ruby-70);

  --tone-caution-wash: var(--gold-10);
  --tone-caution-edge: var(--gold-70);
  --tone-caution-text: var(--gold-70);

  --tone-neutral-wash: var(--ink-10);
  --tone-neutral-edge: var(--ink-70);
  --tone-neutral-text: var(--ink-70);

  /* ── Tier 3 · Component ────────────────────────────────────
     Map, interaction state, and shadow. Each one references tier 2 only.
     --map-reach is the map's signal colour. It matches accent on purpose:
     the map names its own role so a later retint does not recolour buttons. */

  --map-reach: var(--color-accent);
  --map-disc: color-mix(in srgb, var(--color-text) 6%, transparent);

  --state-hover-fill: var(--color-surface-sunken);
  --state-hover-edge: var(--color-border-strong);
  --state-press-fill: color-mix(in srgb, var(--color-text) 8%, var(--color-surface-sunken));
  --state-selected-fill: var(--color-surface-raised);
  --state-selected-mark: inset 2px 0 0 var(--color-text);
  --state-disabled: var(--color-text-disabled);

  --shadow-lift: 0 1px 2px color-mix(in srgb, var(--color-text) 14%, transparent);
  --frame-outline: 1px solid color-mix(in srgb, var(--color-text) 14%, transparent);

  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;

  /* Map metrics. Strokes are screen px (pair with non-scaling-stroke). */
  --map-stroke-hair: 1px;
  --map-stroke-ring: 1.5px;
  --map-stroke-emphasis: 2px;
  --map-stroke-strong: 3px;
  --map-alpha-ghost: .2;
  --map-alpha-muted: .5;
  --map-alpha-live: .8;
  --map-dash-inactive: 2 6;
  --map-dash-caution: 5 4;


  /* ── Type. Explorer product scale, not the marketing site.
        rem so the user's font-size preference applies (root 16px).
        Display and title adapt; body, ui, caption, label and data stay fixed.
        Weights are 400 and 500. Color stays on the element.
        Role              Size                                      Weight  LH     Tracking      Use
        .text-display     clamp(1.5rem, 1.2rem + 1.5vw, 1.75rem)    500     1.15   -0.015em      verdict headline only
                          min 1.5rem (24px) · max 1.75rem (28px)
        .text-title       clamp(1.125rem, 1rem + 0.6vw, 1.25rem)    500     1.2    -0.01em       page title
                          min 1.125rem (18px) · max 1.25rem (20px)
        .text-heading     1.125rem (18px)                           500     1.25   -0.01em       section / card heading
        .text-subheading  1rem (16px)                               500     1.4     0            minor heading
        .text-lead        1rem (16px)                               400     1.45    0            verdict reason, intro body
        .text-body        0.875rem (14px)                           400     1.45    0            default body / table cell
        .text-ui          0.875rem (14px)                           500     1.4     0            buttons, nav, table head, row title
        .text-caption     0.75rem (12px)                            400     1.4     0            secondary / metadata
        .text-eyebrow     0.75rem (12px)                            500     1.4     0.08em (↑)   section labels
        .text-label       0.625rem (10px)                           500     normal  0.08em (↑)   map pills and chips only
        .text-data        0.875rem (14px)                           400     1.45    0            mono — addresses / hashes / numbers ── */
  /* Suisse Intl is the licensed brand face; Inter stands in until it's licensed for web. */
  --font-brand: 'Suisse Intl', 'Inter', 'Inter Fallback', system-ui, sans-serif;
  --font-sans: var(--font-brand);
  --font-code: 'JetBrains Mono', 'JetBrains Mono Fallback', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --tracking-display: -0.015em;
  --tracking-title: -0.01em;
  --tracking-label: 0.08em;

  --type-display-size: clamp(1.5rem, 1.2rem + 1.5vw, 1.75rem);
  --type-display-weight: 500;
  --type-display-leading: 1.15;

  --type-title-size: clamp(1.125rem, 1rem + 0.6vw, 1.25rem);
  --type-title-weight: 500;
  --type-title-leading: 1.2;

  --type-heading-size: 1.125rem;
  --type-heading-weight: 500;
  --type-heading-leading: 1.25;

  --type-subheading-size: 1rem;
  --type-subheading-weight: 500;
  --type-subheading-leading: 1.4;

  --type-lead-size: 1rem;
  --type-lead-weight: 400;
  --type-lead-leading: 1.45;

  --type-body-size: 0.875rem;
  --type-body-weight: 400;
  --type-body-leading: 1.45;

  --type-ui-size: 0.875rem;
  --type-ui-weight: 500;
  --type-ui-leading: 1.4;

  --type-caption-size: 0.75rem;
  --type-caption-weight: 400;
  --type-caption-leading: 1.4;

  --type-eyebrow-size: 0.75rem;
  --type-eyebrow-weight: 500;
  --type-eyebrow-leading: 1.4;

  --type-label-size: 0.625rem;
  --type-label-weight: 500;
  --type-label-leading: normal;

  --type-data-size: 0.875rem;
  --type-data-weight: 400;
  --type-data-leading: 1.45;

  /* ── Space. 0.25rem grid, tops out at 3rem between sections.
        token            rem      px   role
        --space-tight    0.25     4    icon↔label, chip internals
        --space-inline   0.5      8    inline element groups
        --space-snug     0.75    12    dense rows, table cells, form fields
        --space-group    1       16    related control groups
        --space-page     1.25    20    app content padding
        --space-card     1.5     24    card padding + base vertical gutter
        --space-block    2       32    separated blocks within a section
        --space-region   2.5     40    sub-sections
        --space-section  3       48    gap between major page sections ── */
  --space-tight: 0.25rem;
  --space-inline: 0.5rem;
  --space-snug: 0.75rem;
  --space-group: 1rem;
  --space-page: 1.25rem;
  --space-card: 1.5rem;
  --space-block: 2rem;
  --space-region: 2.5rem;
  --space-section: 3rem;

  /* Component sizes. Hit area, controls, icons, and a few fixed measures. */
  --size-touch: 2.75rem;
  --size-control-sm: 2rem;
  --size-control: 2.5rem;
  --size-control-lg: 3rem;
  --size-icon-sm: 1rem;
  --size-icon: 1.125rem;
  --measure-text: 44ch;
  --measure-detail: 64ch;
  --width-result: 36rem;
  --width-console: 1440px;
  --width-map: 420px;
  --card-pad: var(--space-group);

  /* ── Radius. Controls, surfaces, and the pill. */
  --radius-control: 12px; /* inputs, nav, segments */
  --radius-surface: 16px; /* cards, mast, stage */
  --radius-full: 999px;

  --button-pad-y: var(--space-snug);
  --button-pad-x: var(--space-page);

  /* ── Motion ──────────────────────────────────────────────── */
  --ease-newton: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-interaction: 300ms;
  --duration-emphasis: calc(var(--duration-interaction) * 2);
  --duration-beat: calc(var(--duration-interaction) * 4);
  --duration-cycle: calc(var(--duration-interaction) * 12);
  --stagger: calc(var(--duration-interaction) / 5);


  /* ── Layout. Explorer / Tailwind: sm 640, md 768, lg 1024.
        Phone rules sit below sm. The console is one column below lg
        and two columns from lg. 420px is a component fit, not a step. */
  --shell-pad: var(--space-group);
  --shell-gap: var(--space-snug);
  --inset: clamp(var(--space-card), 4vw, var(--space-section));
}