/* ── Scopic design tokens — auto-generated by Sites/scripts/sync-tokens.mjs ──
   Source : scopic-main/.tokens-cache/index.css
   Do NOT edit this file directly. Edit canonical index.css and re-run prebuild.
   Site-specific overrides live in tokens-overrides.css (appended below).      */

:root {
  /* ── Colour: surface ─────────────────────────────────────────────────── */
  --map-bg:        #F7F4F2;   /* Parchment — map background            */
  --surface-bg:    #FDFCFB;   /* panels, headers, dropdowns               */
  --surface-soft:  #FAFAF8;   /* warm-grey surface — popover bg, secondary card */
  --surface-dark:  #1C1917;   /* primary action button bg, filled chip bg. Aligned to warm Carbon (= --accent) on [[15 May 26]]; previously cold navy #1A2232 — a long-standing palette fork. Dark-mode flip lives in [data-theme="dark"]. */
  --border-color:  #E9E0D8;   /* default — panels, cards, dividers, element outlines */
  --border-strong: #DACABE;   /* emphasis — focused inputs, selected states, modals  */

  /* ── Colour: text ────────────────────────────────────────────────────── */
  --text-primary: #1C1A18;
  --text-muted:   #6F6361;
  --text-subtle:  #9E9590;
  --text-faint:   #B8B2AA;
  --text-on-dark: #FFFFFF;    /* text/icon on --surface-dark (light mode: white on Carbon). Flips in dark mode where --surface-dark becomes cream. */

  /* ── Status overlays — translucent fills + borders for success/error states ── */
  --status-success-fill:   rgba(77, 158, 114, 0.082);  /* was #4D9E7215 */
  --status-success-border: rgba(77, 158, 114, 0.251);  /* was #4D9E7240 */
  --status-error-fill:     rgba(196, 94, 120, 0.082);  /* was #C45E7815 */
  --status-error-border:   rgba(196, 94, 120, 0.251);  /* was #C45E7840 */

  /* ── Colour: brand + accent ──────────────────────────────────────────── */
  --brand:        #B8202E;   /* Carmine — logo, identity, used sparingly in app  */
  --brand-subtle: #FAEAE9;   /* Carmine tint — tag bg, highlighted brand areas   */
  --accent:       #1C1917;   /* Carbon  — interactive states, selection, focus   */

  /* ── Colour palette — main · subtle · label ─────────────────────────────
     main:   hsl(H, 60%, 52%) — chip, dot, icon
     subtle: hsl(H, 45%, 93%) — tag background, row highlight
     label:  hsl(H, 55%, 32%) — text on white, WCAG AA                    */
  --colour-red:           #C94038;
  --colour-red-subtle:    #FAEAE9;
  --colour-red-label:     #7A1E1E;

  --colour-orange:        #C87038;
  --colour-orange-subtle: #FAF0E6;
  --colour-orange-label:  #7A3D10;

  --colour-yellow:        #B89020;
  --colour-yellow-subtle: #FAF2D6;
  --colour-yellow-label:  #6B5000;

  --colour-green:         #329860;
  --colour-green-subtle:  #E0F4EA;
  --colour-green-label:   #1A5C38;

  --colour-teal:          #2898A0;
  --colour-teal-subtle:   #DCF2F4;
  --colour-teal-label:    #145C60;

  --colour-blue:          #3070C0;
  --colour-blue-subtle:   #DCEAFA;
  --colour-blue-label:    #183878;

  --colour-purple:        #7840C0;
  --colour-purple-subtle: #EADCFA;
  --colour-purple-label:  #3C1878;

  --colour-pink:          #C84080;
  --colour-pink-subtle:   #FADCEA;
  --colour-pink-label:    #781848;

  --colour-brown:         #9A6838;
  --colour-brown-subtle:  #F0E8DC;
  --colour-brown-label:   #58381A;

  --colour-grey:          #788090;
  --colour-grey-subtle:   #ECEFF2;
  --colour-grey-label:    #404850;

  /* ── Colour: interaction fills (hover/press/subtle backgrounds) ──────── */
  --fill-hover:   color-mix(in srgb, var(--accent)  3%, transparent);
  --fill-subtle:  color-mix(in srgb, var(--accent)  5%, transparent);
  --fill-medium:  color-mix(in srgb, var(--accent)  8%, transparent);
  --fill-strong:  color-mix(in srgb, var(--accent) 12%, transparent);

  /* ── Colour: bulk action bar ─────────────────────────────────────────── */
  --bulkbar-bg:           #1A2232;
  --bulkbar-text:         #FFFFFF;
  --bulkbar-border:        rgba(255,255,255,0.06);
  --bulkbar-border-strong: rgba(255,255,255,0.22);
  --bulkbar-divider:       rgba(255,255,255,0.12);
  --bulkbar-input-bg:      rgba(255,255,255,0.10);
  --bulkbar-input-border:  rgba(255,255,255,0.20);

  /* ── Interaction: focus ──────────────────────────────────────────────── */
  --focus-ring-color: rgba(91,111,214,0.5);

  /* ── Typography: size scale ──────────────────────────────────────────── */
  /* Migration status: ✓ approved | ⏳ pending Namit review | ✗ unresolved (no token) */
  --font-2xs:     0.75rem;    /* 12px — panel labels, entity type badges. Bumped on [[15 May 26]] (scale lifted so sm = 16). */
  --font-xs:      0.875rem;   /* 14px — column headers, secondary metadata. Bumped on [[15 May 26]]. */
  --font-ui:      0.9375rem;  /* 15px — primary UI content — table rows, list items. Bumped on [[15 May 26]]. */
  --font-sm:      1rem;       /* 16px — secondary / description text, h3. NOW THE 16px FLOOR; matches the modern web-readable minimum. */
  --font-base:    1.125rem;   /* 18px — primary body — tiptap, page content. Bumped on [[15 May 26]] (Namit: "still tiny" after the prior 16px bump). */
  --font-xl:      1.25rem;    /* 20px — panel/page titles, element headings. */
  --font-lg:      1.375rem;   /* 22px — h1 headings. */
  --font-2xl:     1.625rem;   /* 26px — large display numbers (pricing, UserMenu). Bumped on [[15 May 26]]. */
  --font-3xl:     2rem;       /* 32px — static-site doc headings (internal.scopic.app overrides --font-base higher) */
  --font-4xl:     2.5rem;     /* 40px — static-site doc headings */
  --font-display: 1.625rem;   /* 26px — pricing/marketing display numbers | ✓ approved */
  --font-code:    0.75rem;    /* 12px — monospace — inline code, code blocks | ⏳ pending */

  /* ── Typography: weight scale ────────────────────────────────────────── */
  /* Migration status: ✓ approved | ⏳ pending Namit review | ✗ unresolved (no token) */
  --weight-normal:   400;   /* ⏳ pending — 2 hardwired instances */
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  /* ✗ unresolved: fontWeight: 800 (1×) — no --weight-heavy token; decision needed */

  /* ── Typography: line-height scale ──────────────────────────────────── */
  --leading-tight:   1.3;   /* headings                         */
  --leading-body:    1.65;  /* description / markdown text      */
  --leading-relaxed: 1.7;   /* editor body text                 */

  /* ── Typography: nav + eyebrow (static sites) ───────────────────────── */
  --nav-size:      var(--font-sm);
  --nav-weight:    500;
  --eyebrow-size:  var(--font-xs);
  --eyebrow-track: 0.08em;

  /* ── Typography: font families ──────────────────────────────────────── */
  --font:       'Onest', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: 'Gloock', Georgia, serif;  /* display headings */
  --font-mono:  'JetBrains Mono', 'Fira Code', monospace;

  /* ── Space scale (rem) — used by static sites; app uses Tailwind utilities ── */
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */

  /* ── Layout (static sites) ──────────────────────────────────────────── */
  --container-px: 2.5rem;          /*  40px — page side padding             */
  --stage-pad:    var(--space-8);  /*  32px — stage padding                 */
  /* --container-wide is a per-site override (marketing 80rem · internal 68.75rem) */

  /* ── Motion ─────────────────────────────────────────────────────────── */
  --dur-fast:  120ms;
  --dur-theme: 220ms;
  --ease:      ease;

  /* ── Shape: border-radius scale (rem) ───────────────────────────────── */
  --radius-xs: 0.1875rem;  /*  3px — tiny drag handles, inline chips          */
  --radius-sm: 0.25rem;    /*  4px — small elements, toggles                  */
  --radius-md: 0.375rem;   /*  6px — standard buttons, tags, chips            */
  --radius-lg: 0.5rem;     /*  8px — cards, section containers                */
  --radius-xl: 0.75rem;    /* 12px — popover cards, icon picker, badges        */
  --radius-2xl: 0.875rem;  /* 14px — large modal panels                       */

  /* ── Shadow scale ────────────────────────────────────────────────────── */
  --shadow-rest:     0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.05);
  --shadow-hover:    0 4px 14px rgba(0,0,0,0.09), 0 1px 4px rgba(0,0,0,0.06);
  --shadow-floating: 0 4px 20px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.06);
  --shadow-card:     0 8px 24px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.06);
  --shadow-modal:    0 24px 64px rgba(0,0,0,0.18);
  --shadow-focus:    0 0 0 3px rgba(184,32,46,0.18);  /* focus ring — static sites */

  /* ── Overlay ─────────────────────────────────────────────────────────── */
  --overlay-bg: rgba(28, 26, 24, 0.4);  /* warm dark from --text-primary; modal backdrops */
}

/* ─── Dark mode tokens ───────────────────────────────────────────────────────
   Reassigns every token above. No new properties — only overrides.         */
[data-theme="dark"] {
  /* Surface */
  --map-bg:        #18181A;
  --surface-bg:    #242427;
  --border-color:  rgba(242,239,231,0.08);
  --border-strong: rgba(242,239,231,0.18);

  /* Text */
  --text-primary: #F2EFE7;
  --text-muted:   #DDD9CD;
  --text-subtle:  #B0ACA0;
  --text-faint:   #918D83;

  /* Brand + accent — brightened for dark surfaces */
  --brand:        #E04050;   /* Carmine brightened — readable on dark bg         */
  --brand-subtle: #3D0A10;   /* Carmine tint darkened — tag bg on dark surfaces  */
  --accent:       #F2EFE7;   /* Carbon flips to cream — high contrast on dark    */

  /* Surface-dark + text-on-dark flip — primary action buttons become a light
     "inverted" surface in dark mode (cream bg + warm-dark text). Matches the
     --accent inversion. Fixes the long-standing cold-navy fork in light mode. */
  --surface-dark: #F2EFE7;   /* cream — primary action button bg in dark mode    */
  --text-on-dark: #1C1917;   /* warm Carbon — readable text on the cream button  */

  /* Colour palette — dark surface variants (brighter main, dark subtle, lighter label) */
  --colour-red:           #E05058;
  --colour-red-subtle:    #3D1818;
  --colour-red-label:     #F0A0A0;

  --colour-orange:        #E08050;
  --colour-orange-subtle: #3D2010;
  --colour-orange-label:  #F0B888;

  --colour-yellow:        #D4A830;
  --colour-yellow-subtle: #3D2E08;
  --colour-yellow-label:  #EDD080;

  --colour-green:         #50B878;
  --colour-green-subtle:  #102E1C;
  --colour-green-label:   #90D8B0;

  --colour-teal:          #40B0B8;
  --colour-teal-subtle:   #0E2E30;
  --colour-teal-label:    #80D4D8;

  --colour-blue:          #5090E0;
  --colour-blue-subtle:   #101E3D;
  --colour-blue-label:    #90C0F0;

  --colour-purple:        #9860E0;
  --colour-purple-subtle: #200E3D;
  --colour-purple-label:  #C090F0;

  --colour-pink:          #E05898;
  --colour-pink-subtle:   #3D0E28;
  --colour-pink-label:    #F090C0;

  --colour-brown:         #B88058;
  --colour-brown-subtle:  #2E1C08;
  --colour-brown-label:   #D4B090;

  --colour-grey:          #909AA8;
  --colour-grey-subtle:   #1C2028;
  --colour-grey-label:    #C0C8D0;

  /* Bulk action bar */
  --bulkbar-bg:           #2F2F33;
  --bulkbar-text:         #F2EFE7;
  --bulkbar-border:       rgba(242,239,231,0.14);
  --bulkbar-divider:      rgba(242,239,231,0.16);
  --bulkbar-input-bg:     rgba(242,239,231,0.08);
  --bulkbar-input-border: rgba(242,239,231,0.18);

  /* Overlay */
  --overlay-bg: rgba(0, 0, 0, 0.6);  /* stronger on dark backgrounds */

  color-scheme: dark;
}


/* ── Site-specific overrides (manual) ───────────────────────────────────── */
/* ── scopic.app (marketing) — site-specific token overrides ────────────────
   Appended after the canonical block by Sites/scripts/sync-tokens.mjs.
   Anything declared here wins because it follows the canonical :root block.
   Keep this file lean — only values that legitimately diverge from canonical.
*/

:root {
  /* Layout: marketing page is wider than the internal docs column. */
  --container-wide: 80rem;     /* 1280px */

  /* Extra spacing step used by long-form marketing sections. */
  --space-32: 8rem;            /* 128px */
}