/* Generated from the Trace design system. Do not edit. */
/* design tokens/colors.css */
:root{
  /* ---- The three fixed brand colours ---- */
  --navy:#1f2633;
  --coral:#ef6f6c;
  --light-blue:#e9eef6;

  /* ---- Support tones (greys, hairlines, disabled) ---- */
  --white:#ffffff;
  --grey-50:#f5f7fa;
  --grey-200:#dfe3ea;
  --grey-500:#8a919c;
  --grey-700:#5a6473;
  --light-blue-grey:#c6d1e2;

  /* Navy at opacity, for rules and fills over light grounds */
  --navy-08:rgba(31,38,51,.08);
  --navy-12:rgba(31,38,51,.12);
  --navy-40:rgba(31,38,51,.4);
  --coral-12:rgba(239,111,108,.12);
  --coral-24:rgba(239,111,108,.24);

  /* Ground, washed graph-paper grid with a coral bloom. Pages and light slides only. */
  --grid-line:rgba(31,38,51,.07);
  --grid-line-weight:1px;
  --grid-size-sm:48px;  /* app screens, documents */
  --grid-size:56px;     /* website */
  --grid-size-lg:64px;  /* slides, matches slide padding, so the grid meets the frame */
  --grid-image:linear-gradient(var(--grid-line) var(--grid-line-weight),transparent var(--grid-line-weight)),linear-gradient(90deg,var(--grid-line) var(--grid-line-weight),transparent var(--grid-line-weight)); /* @kind other */
  --grid-fade:radial-gradient(ellipse 80% 75% at 50% 45%,#000 25%,transparent 100%); /* @kind other */
  /* Bloom intensities (coral alpha): faint .10 · soft .16 · medium .24 · strong .34, composed by the Ground component from any edge. */

  /* ---- Semantic: ink ---- */
  --text-primary:var(--navy);
  --text-secondary:var(--grey-700);
  --text-muted:var(--grey-500);
  --text-disabled:var(--grey-500);
  --text-on-navy:var(--light-blue-grey);
  --text-on-navy-strong:var(--white);
  --text-on-coral:var(--white);
  --text-inverse:var(--white);
  /* Coral is never body text: 2.9:1 on white. 24px+ only. */
  --text-emphasis-large:var(--coral);

  /* ---- Semantic: surfaces ---- */
  --surface-page:var(--white);
  --surface-subtle:var(--grey-50);
  --surface-card:var(--white);
  --surface-data:var(--light-blue);
  --surface-inverse:var(--navy);
  --surface-zebra:var(--grey-50);
  --surface-accent:var(--coral);
  --surface-accent-quiet:var(--coral-12);

  /* ---- Semantic: lines ---- */
  --rule-strong:var(--navy);     /* the 2px frame rule */
  --rule-hairline:var(--grey-200);
  --border-field:var(--navy);
  --border-card:var(--grey-200);
  --border-on-navy:rgba(198,209,226,.24);

  /* ---- Semantic: interactive ---- */
  --action-primary-bg:var(--coral);
  --action-primary-fg:var(--white);
  --action-primary-bg-hover:#e85f5c;
  --action-primary-bg-active:#d95552;
  --action-secondary-fg:var(--navy);
  --action-secondary-border:var(--navy);
  --action-secondary-bg-hover:var(--light-blue);
  --action-disabled-bg:var(--grey-200);
  --action-disabled-fg:var(--grey-500);
  --focus-ring:var(--navy);

  /* ---- Confidence states ----
     The guideline fixes the thresholds (>70 green, 50-70 amber, <50 coral)
     but not the hexes; these are taken from the fixed chart palette so no
     new colour enters the system. */
  --confidence-high:#2fd4c0;
  --confidence-average:#f5c94c;
  --confidence-low:var(--coral);
  --confidence-high-quiet:rgba(47,212,192,.18);
  --confidence-average-quiet:rgba(245,201,76,.22);
  --confidence-low-quiet:var(--coral-12);
}

/* design tokens/typography.css */
:root{
  /* Families. Two families in product and brand; mono only for figures and small caps labels. */
  --font-display:"Outfit","Garet",system-ui,sans-serif;   /* stands in for Garet */
  --font-text:"Inter",system-ui,-apple-system,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;

  /* Weights */
  --weight-book:400;
  --weight-medium:500;
  --weight-semibold:600;

  /* Role sizes, straight from the type table */
  --size-display:64px;
  --size-page-title:40px;
  --size-slide-title:48px;
  --size-section-heading:20px;
  --size-body:15px;
  --size-caption:13px;
  --size-label:11px;

  /* Display steps between page title and section heading, for dense UI */
  --size-heading-lg:28px;
  --size-heading-md:24px;
  --size-body-lg:17px;

  /* Line heights */
  --leading-display:1.05;
  --leading-title:1.12;
  --leading-heading:1.3;
  --leading-paragraph:1.6;
  --leading-interface:1.4;

  /* Tracking. Garet tightens at display sizes; Inter never tracks. */
  --tracking-display:-0.035em;
  --tracking-title:-0.03em;
  --tracking-heading:-0.02em;
  --tracking-text:0;
  --tracking-label:0.08em;   /* small uppercase mono labels only */

  /* Measure */
  --measure-prose:68ch;   /* 60-75 characters */

  /* Composed roles */
  --type-display:var(--weight-semibold) var(--size-display)/var(--leading-display) var(--font-display);
  --type-page-title:var(--weight-semibold) var(--size-page-title)/var(--leading-title) var(--font-display);
  --type-section-heading:var(--weight-semibold) var(--size-section-heading)/var(--leading-heading) var(--font-display);
  --type-body:var(--weight-book) var(--size-body)/var(--leading-paragraph) var(--font-text);
  --type-body-ui:var(--weight-book) var(--size-body)/var(--leading-interface) var(--font-text);
  --type-caption:var(--weight-book) var(--size-caption)/var(--leading-interface) var(--font-text);
  --type-label:var(--weight-medium) var(--size-label)/1.2 var(--font-mono);
  --type-figure:var(--weight-medium) var(--size-body)/var(--leading-interface) var(--font-mono);
}

/* design tokens/spacing.css */
/* The guideline fixes rule weights and radii but not a spacing scale.
   This 4px-based scale is inferred from the ruled-page layouts in sections 12-13
   and is the house scale for this system. */
:root{
  --space-0:0;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --space-16:64px;
  --space-20:80px;
  --space-24:96px;

  /* Layout */
  --gutter-page:48px;
  --gutter-page-tight:24px;
  --max-width-content:1200px;
  --max-width-prose:680px;
  --slide-padding:64px;

  /* Component insets */
  --control-height-sm:32px;
  --control-height:40px;
  --control-height-lg:48px;
  --control-pad-x:16px;
  --control-pad-x-lg:20px;
  --card-pad:24px;
  --card-pad-tight:16px;
  --cell-pad-y:12px;
  --cell-pad-x:16px;

  /* Logo */
  --logo-min-width:96px;
  --logo-clear-space:1em; /* = height of the mark's dot */
  --mark-min-width:20px;
}

/* design tokens/borders.css */
:root{
  /* Structure comes from 2px rules and alignment, not from shadows. */
  --rule-weight:2px;
  --hairline-weight:1px;
  --border-width:1px;
  --border-width-strong:2px;

  --radius-none:0;
  --radius-control:8px;   /* buttons, fields */
  --radius-card:12px;
  --radius-pill:999px;
  --radius-bar:0;         /* chart bars never round */

  /* There is no shadow system. These exist only so consumers have a
     no-op to reach for instead of inventing one. */
  --shadow-none:none;
  --elevation-overlay:0 16px 40px rgba(31,38,51,.16); /* dialogs and menus only */

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

/* design tokens/charts.css */
:root{
  /* Series take these in order, so a channel keeps its colour across reports. */
  --chart-1:#b4e34a;
  --chart-2:#2fd4c0;
  --chart-3:#67d9ef;
  --chart-4:#f5c94c;
  --chart-5:#7ee2b8;
  --chart-track:#e9eef6;

  /* Chart furniture */
  --chart-axis:var(--navy);
  --chart-axis-weight:2px;
  --chart-gridline:#dfe3ea;
  --chart-gridline-weight:1px;
  --chart-tick-color:#5a6473;
  --chart-tick-font:500 11px/1.2 var(--font-mono);
  --chart-bar-gap:25%;
  --chart-bar-radius:0;
  --chart-card-radius:12px;

  /* Channel pills, quiet tint + a darker ink of the same hue. Keyed by source, medium breaks ties. */
  --channel-neutral-bg:#eef1f6;   --channel-neutral-ink:var(--navy);
  --channel-paid-bg:#e9e3fb;      --channel-paid-ink:#5b3fc4;
  --channel-organic-bg:#e7f5c6;   --channel-organic-ink:#4a7d1a;
  --channel-search-paid-bg:#fdf0c4; --channel-search-paid-ink:#8a5a1a;
  --channel-email-bg:#d3f5ec;     --channel-email-ink:#0f7a68;
  --channel-referral-bg:#fdf1b3;  --channel-referral-ink:#a8792c;
  --channel-social-bg:#d3f3fb;    --channel-social-ink:#0f6e85;
  --channel-social-paid-bg:#dfe3fb; --channel-social-paid-ink:#2e3fa8;
  --channel-visual-bg:#fbe3e6;    --channel-visual-ink:#a8284a;
  --channel-ai-bg:#d8f2dc;        --channel-ai-ink:#1f6b3a;
}

/* design tokens/motion.css */
/* Motion is functional: state changes, not entrances. No bounce, no spring,
   no long fades. Anything that draws attention to itself is off-brand. */
:root{
  --duration-instant:80ms /* @kind other */;
  --duration-fast:120ms /* @kind other */;
  --duration-base:180ms /* @kind other */;
  --duration-slow:240ms /* @kind other */;
  --ease-standard:cubic-bezier(.2,0,.38,1) /* @kind other */;
  --ease-out:cubic-bezier(0,0,.38,1) /* @kind other */;
  --transition-control:background-color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard);
}
@media (prefers-reduced-motion:reduce){:root{--duration-instant:0ms /* @kind other */;--duration-fast:0ms /* @kind other */;--duration-base:0ms /* @kind other */;--duration-slow:0ms /* @kind other */}}

/* design tokens/base.css */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font:var(--type-body);color:var(--text-primary);background:var(--surface-page);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--weight-semibold);color:var(--text-primary);margin:0;text-wrap:pretty}
h1{font-size:var(--size-page-title);line-height:var(--leading-title);letter-spacing:var(--tracking-title)}
h2{font-size:var(--size-heading-lg);line-height:var(--leading-heading);letter-spacing:var(--tracking-heading)}
h3{font-size:var(--size-section-heading);line-height:var(--leading-heading);letter-spacing:var(--tracking-heading)}
p{margin:0 0 var(--space-4);max-width:var(--measure-prose);text-wrap:pretty}
a{color:var(--navy);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:var(--transition-control)}
a:hover{color:var(--coral);text-decoration-color:var(--coral)}
a:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring);outline-offset:var(--focus-ring-offset);border-radius:2px}
::selection{background:var(--coral-24)}