/* Tracue design tokens — extracted from the tracue.com landing page (tracue-landingpage/index.html).
   Dark is the default (the landing page and its product mock are dark, ink #080D10 with orange #FF7A00).
   Light is the same system on the landing page's "paper" surfaces. Switch with <html data-theme="light">.
   Source values are marked (L) = taken verbatim from the landing page, (D) = derived for app density. */

/* Fonts are self-hosted (fonts/*.woff2, latin subset, SIL OFL). No request to Google. In the app copy fonts/ next to tokens.css (or fix the url() paths). */
@font-face{font-family:"Albert Sans";font-style:normal;font-weight:400 600;font-display:swap;src:url("fonts/AlbertSans-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:"Bricolage Grotesque";font-style:normal;font-weight:300 700;font-stretch:100%;font-display:swap;src:url("fonts/BricolageGrotesque-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}

:root{
  /* ---- brand colours (L) ---- */
  --ink:#080D10;          /* page background in dark */
  --ink-2:#11181C;        /* raised surface */
  --ink-3:#1A2328;        /* second raised surface, hover wells */
  --paper:#FFFFFF;
  --paper-2:#F8F8F8;
  --slate:#4A5464;
  --accent:#FF7A00;       /* the one accent: primary actions, focus, progress, "high" */
  --on-accent:#080D10;    /* text on solid orange: ink, 7.5:1 (white is only 2.6:1) */
  --accent-soft:#FFB27A;  /* accent text on dark */
  --peach:#F6C3A1;
  --ok-green:#3DDC97;

  /* ---- typography (L) ---- */
  --font-display:"Bricolage Grotesque",Arial,sans-serif;  /* headings, labels, buttons, table headers, numbers */
  --font-text:"Albert Sans",Arial,sans-serif;             /* body and UI text */
  --fs-11:11px; --fs-12:12px; --fs-13:13px; --fs-14:14px; --fs-16:16px; --fs-20:20px; --fs-24:24px; --fs-32:32px; --fs-44:44px;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600;
  --lh-tight:1.15; --lh-ui:1.4; --lh-body:1.5;
  --ls-label:2.1px;       /* uppercase label / button (L) */
  --ls-label-sm:1.4px;    /* table header, small label (L) */
  --ls-tight:-.03em;      /* big numbers and headlines (L) */

  /* ---- spacing (4-pt scale) (D) ---- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-15:60px;
  --gutter:clamp(16px,4vw,48px);   /* (L) */
  --row-h:46px;                    /* table row, even height (D) */
  --ctl-h:36px; --ctl-h-sm:28px; --ctl-h-lg:44px;   /* controls: 44 = landing small button (L), 52 = landing big button */

  /* ---- radius (L) ---- */
  --r-sm:6px; --r-md:8px;   /* buttons 8 */
  --r-lg:12px;              /* cards, steps, panels */
  --r-xl:16px;              /* large surfaces (mock) */
  --r-pill:100px;           /* chips, pills */

  /* ---- motion (L) ---- */
  --t:.25s ease;

  /* ---- icons ---- */
  --icon-stroke:1.6;        /* landing svg stroke width */
  --icon-16:16px; --icon-20:20px; --icon-24:24px;

  /* ================= semantic tokens: DARK (default) ================= */
  color-scheme:dark;
  --bg:var(--ink);
  --surface:var(--ink-2);
  --surface-2:var(--ink-3);
  --surface-3:#222D33;                          /* (D) hover / selected well */
  --text:#FFFEFD;                               /* (L) */
  --text-muted:rgba(255,254,253,.6);            /* (L) */
  --text-faint:rgba(255,254,253,.5);            /* (L) 4.5:1 or more on every dark surface (PO-221: it was .4 = 3.8:1) */
  --line:rgba(255,255,255,.08);                 /* (L) */
  --line-strong:rgba(255,255,255,.2);           /* (L) ghost button border */
  --accent-text:var(--accent-soft);
  --accent-bg:rgba(255,122,0,.14);              /* (L) orange chip */
  --ok:#3DDC97; --ok-bg:rgba(61,220,151,.12);   /* (L) green chip */
  --warn:#FFB27A; --warn-bg:rgba(255,178,122,.12);
  --danger:#D99A9A; --danger-bg:rgba(217,120,120,.12);
  --info:#7FB2FF; --info-bg:rgba(127,178,255,.12);
  --btn-primary-bg:var(--paper); --btn-primary-fg:var(--ink);   /* (L) .btn-white */
  --btn-primary-hover-bg:var(--accent); --btn-primary-hover-fg:var(--on-accent);
  --bar-bg:var(--ink-3); --bar-fg:var(--text);  /* bulk-selection bar */
  --overlay:rgba(8,13,16,.7);
  --shadow-pop:0 24px 60px -12px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06);      /* menus, dialogs */
  --shadow-panel:-24px 0 60px -20px rgba(0,0,0,.6);                                   /* side panel */
  --shadow-glow:0 40px 120px -20px rgba(255,122,0,.18);                               /* (L) hero mock glow, use rarely */
  --focus:0 0 0 2px var(--bg),0 0 0 4px var(--accent);

  /* signal family colours: bright text on a translucent tint of the same hue. Contrast >= 4.5:1 on surface, surface-2 and hover (checked) */
  --fam-hiring-bg:rgba(34,197,94,.22);   --fam-hiring-fg:#4ADE80;
  --fam-launch-bg:rgba(255,122,0,.24);   --fam-launch-fg:#FFA24D;
  --fam-funding-bg:rgba(139,92,246,.28); --fam-funding-fg:#C4A8FF;
  --fam-site-bg:rgba(59,130,246,.26);    --fam-site-fg:#7DB8FF;
  --fam-news-bg:rgba(236,72,153,.26);    --fam-news-fg:#FF94C4;
  --fam-domain-bg:rgba(20,184,166,.24);  --fam-domain-fg:#4FE3D3;
  --fam-location-bg:rgba(234,179,8,.24); --fam-location-fg:#FFD84D;
  /* avatar palette: white initials, contrast >= 4.5:1 (pick by hashing the name) */
  --av-1:#C2410C; --av-2:#BE185D; --av-3:#6D28D9; --av-4:#1D4ED8; --av-5:#0F766E; --av-6:#B91C1C; --av-7:#4D7C0F; --av-8:#A16207; --av-9:#7E22CE; --av-10:#0369A1;
}

/* ================= LIGHT ================= */
[data-theme="light"]{
  color-scheme:light;
  --bg:var(--paper);
  --surface:var(--paper);
  --surface-2:var(--paper-2);                   /* (L) light cards */
  --surface-3:#EFEFEF;
  --text:var(--ink);
  --text-muted:rgba(8,13,16,.7);                /* (L) 4.5:1 or more on every light surface (PO-221) */
  --text-faint:rgba(8,13,16,.62);
  --line:rgba(8,13,16,.08);                     /* (L) */
  --line-strong:rgba(8,13,16,.2);
  --accent-text:#A84A00;                        /* (D) 4.5:1 or more on white, paper-2 and the grey wells */
  --accent-bg:rgba(255,122,0,.12);
  --ok:#12805A; --ok-bg:rgba(18,128,90,.10);
  --warn:#9A5B00; --warn-bg:rgba(255,122,0,.10);
  --danger:#A85050; --danger-bg:rgba(168,80,80,.09);
  --info:#2457B8; --info-bg:rgba(36,87,184,.09);
  --btn-primary-bg:var(--ink); --btn-primary-fg:var(--paper);   /* (L) .btn-ink */
  --btn-primary-hover-bg:var(--accent); --btn-primary-hover-fg:var(--on-accent);
  --bar-bg:var(--ink); --bar-fg:var(--paper);
  --overlay:rgba(8,13,16,.45);
  --shadow-pop:0 20px 50px -12px rgba(8,13,16,.25),0 0 0 1px rgba(8,13,16,.06);
  --shadow-panel:-20px 0 50px -20px rgba(8,13,16,.25);
  --shadow-glow:0 40px 120px -20px rgba(255,122,0,.22);
  --focus:0 0 0 2px var(--bg),0 0 0 4px var(--accent);
  --fam-hiring-bg:rgba(22,163,74,.14);   --fam-hiring-fg:#0B6B3A;
  --fam-launch-bg:rgba(255,122,0,.16);   --fam-launch-fg:#A84A00;
  --fam-funding-bg:rgba(139,92,246,.14); --fam-funding-fg:#5B2FC9;
  --fam-site-bg:rgba(59,130,246,.14);    --fam-site-fg:#1E4FB5;
  --fam-news-bg:rgba(236,72,153,.14);    --fam-news-fg:#A8205F;
  --fam-domain-bg:rgba(20,184,166,.14);  --fam-domain-fg:#0B6F66;
  --fam-location-bg:rgba(234,179,8,.20); --fam-location-fg:#6F5200;
}