/* Design tokens, read from the Paper file "Landing Page - Outlinr" (page Final Designs).
   Dark is the default theme; light applies with <html data-theme="light">. */
:root{
  /* fonts */
  --font-heading:"Figtree",system-ui,sans-serif;   /* headings, bold lines, install numerals */
  --font-body:"DM Sans",system-ui,sans-serif;
  --font-brush:"Knewave",system-ui,sans-serif;     /* only the "it's FREE" accent */
  --font-display:"Instrument Serif",Georgia,serif; /* added by hero: hero + section headings */
  --font-ui:"Inter",system-ui,sans-serif;          /* inside the demo (panel, chart, tables) */
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
  /* type scale */
  --text-xs:12px;--text-sm:14px;--text-base:16px;--text-lg:19px;--text-xl:25px;--text-2xl:30px;--text-display:50px;
  --weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;
  --tracking-display:-0.02em;--tracking-tight:-0.01em;
  --leading-label:17px;--leading-snug:22px;--leading-body:26px;--leading-display:58px;
  /* spacing, radius, layout */
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:40px;--space-10:44px;--space-section:120px;
  --radius-sm:5px;--radius-md:8px;--radius-lg:16px;--radius-xl:30px;--radius-pill:48px;
  --container-content:760px;--container-wide:1130px;
  --bp-phone:390px;--bp-tablet:810px;--bp-laptop:1200px;--bp-desktop:1440px;
  /* score colors (same in both themes) */
  --score-high:#10B981;--score-mid:#F59E0B;--score-low:#EF4444;
  --opacity-muted:.79;
  color-scheme:dark;
  /* DARK (default) */
  --color-bg:#0A0D12;
  --color-surface:#0F1419;
  --color-surface-2:#151A21;
  --color-border:#1F2933;
  --color-border-strong:#2A3441;
  --color-ink:#F3F3F3;
  --color-text-muted:#8A93A6;
  --color-text-soft:#C7CCD6;
  --color-accent:#F59E0B;
  --color-accent-tint:#F59E0B22;
  --color-accent-text:#F59E0B;
  --color-btn-bg:#F3F3F3;      /* primary button: light on dark */
  --color-btn-ink:#0A0D12;
  --color-chip:#151A21;
}
:root[data-theme="light"]{
  color-scheme:light;
  --color-bg:#FFFFFF;
  --color-surface:#FAFAFA;
  --color-surface-2:#F7F7F7;
  --color-border:#EBEFF7;
  --color-border-strong:#E5E7EB;
  --color-ink:#061236;
  --color-text-muted:#4C5265;
  --color-text-soft:#848BA1;
  --color-accent:#F59E0B;
  --color-accent-tint:#F59E0B22;
  --color-accent-text:#D97706;
  --color-btn-bg:#121212;      /* primary button: black on light */
  --color-btn-ink:#F3F3F3;
  --color-chip:#F2F4F7;
}

/* added by nav/install/footer: shared text tones (Paper's "muted"/"subtle") and ring shadow for framed cards */
:root{--color-body:#C7CCD6;--color-sub:#8A93A6;--ring-a:#151A21;--ring-b:#2A3441;--ring-shadow:#00000066}
:root[data-theme="light"]{--color-body:#4C5265;--color-sub:#848BA1;--ring-a:#F2F4F7;--ring-b:#DCE0E8;--ring-shadow:#0612361A}

/* added by features/dashboard: values read from the Paper Features + Dashboard boards (dark | light) */
:root{
  --feat-card-bg:#0F1419;--feat-card-border:#1F2933;--feat-ring-a:#151A21;--feat-ring-b:#2A3441;
  --feat-shadow-a:#00000066;--feat-shadow-b:#00000040;--feat-shadow-modal:#00000099;
  --feat-inset:#0A0D12;--feat-line:#1F2933;--feat-ctl-border:#2A3441;--feat-field:#0F1419;
  --feat-on-bg:#2A3441;--feat-on-ink:#FFFFFF;
  --feat-ink:#F3F3F3;--feat-text2:#C7CCD6;--feat-text3:#8A93A6;
  --feat-high:#10B981;--feat-mid:#F59E0B;--feat-low:#EF4444;
  --feat-pill-high:#10B981;--feat-pill-mid:#F59E0B;--feat-pill-low:#EF4444;--feat-pill-ink:#0F1419;
  --feat-badge-high:#10B981;--feat-badge-mid:#F59E0B;--feat-badge-low:#EF4444;--feat-badge-ink:#0F1419;
  --feat-sel-bg:#F59E0B22;--feat-sel-border:#F59E0B;--feat-sel-ink:#F59E0B;
  --feat-amber:#F59E0B;--feat-amber-text:#F59E0B;--feat-amber-soft:#F59E0B14;--feat-amber-tint:#F59E0B22;
  --feat-row-hover:#151A21;--feat-bar:#F59E0B;--feat-bar-off:#2A3441;
  --feat-danger:#EF4444;--feat-scrim:#05070AB8;--feat-pop-bg:#0F1419;--feat-pop-border:#2A3441;
  --feat-modal-ring-b:#2A3441;--feat-hist-border:#F59E0B;--feat-arrow:#6B7280;
}
:root[data-theme="light"]{
  --feat-card-bg:#FAFAFA;--feat-card-border:#EBEFF7;--feat-ring-a:#F2F4F7;--feat-ring-b:#DCE0E8;
  --feat-shadow-a:#0612362E;--feat-shadow-b:#0612361A;--feat-shadow-modal:#06123659;
  --feat-inset:#FFFFFF;--feat-line:#E5E7EB;--feat-ctl-border:#D1D5DB;--feat-field:#FFFFFF;
  --feat-on-bg:#E8ECF3;--feat-on-ink:#061236;
  --feat-ink:#061236;--feat-text2:#4C5265;--feat-text3:#6B7280;
  --feat-high:#059669;--feat-mid:#B45309;--feat-low:#DC2626;
  --feat-badge-high:#059669;--feat-badge-mid:#D97706;--feat-badge-low:#DC2626;--feat-badge-ink:#FFFFFF;
  --feat-sel-bg:#061236;--feat-sel-border:#061236;--feat-sel-ink:#FFFFFF;
  --feat-amber:#F59E0B;--feat-amber-text:#B45309;--feat-amber-soft:#F59E0B14;--feat-amber-tint:#F59E0B22;
  --feat-row-hover:#F8FAFC;--feat-bar:#D97706;--feat-bar-off:#E5E7EB;
  --feat-danger:#DC2626;--feat-scrim:#061236A6;--feat-pop-bg:#FFFFFF;--feat-pop-border:#D1D5DB;
  --feat-modal-ring-b:#DCE0E8;--feat-hist-border:#D97706;--feat-arrow:#6B7280;
}
/* added by dashboard: detail modal fields */
:root{--feat-notes-bg:#0A0D12;--feat-hist-off:#2A3441;--feat-pop-ring-a:#151A21}
/* Features demo window: one border, progress track, step dots */
:root{--feat-win-border:#2A3441;--feat-track:#2F3A48;--feat-dot:#3A4656}
:root[data-theme="light"]{--feat-notes-bg:#FAFAFA;--feat-hist-off:#E5E7EB;--feat-pop-ring-a:#F2F4F7}
:root[data-theme="light"]{--feat-win-border:#E3E3E3;--feat-track:#CBD2E0;--feat-dot:#CBD2E0}

/* ---------- Layout tiers (owner 2026-10-30): layout changes only at 600 / 900 / 1200, everything else is fluid 390 -> 1440.
   phone <= 599 | tablet layout 600-1199 (content capped at 730, centred) | desktop >= 1200 (column 1080, set in scale90.css). */
@media (min-width:600px) and (max-width:1199px){:root{--container-wide:730px}}
/* 600-810: the column lines sit a fixed 40px from each edge (--line-gutter floor in base.css), so the content column is the width between them, not a fixed 730 (owner iPad Mini 768, 2026-11-01: Privacy, Install and the footer art crossed the lines). At 810 this equals 730. */
@media (min-width:600px) and (max-width:810px){:root{--container-wide:calc(100vw - 80px)}}

/* ---------- CTA button tokens (Paper DS 4, owner-decided 2026-10-30) ----------
   Shared look for every "Add to Chrome - it's FREE" button: put class "btn-cta" on an <a class="btn ..."> (the existing name
   .hero-cta also gets it). The Chrome logo is drawn by ::before: do NOT add an <svg>. Markup:
     <a class="btn btn-cta" href="...">Add to Chrome - <span class="brush">it's FREE</span></a>
   Sizes (vars, set per button or via the size classes): default = hero (13px / Knewave 15 / pad 10x20 / logo 16);
   .btn-cta--lg = Install (15 / 17 / 14x28 / logo 20); .btn-cta--sm = phone small (12 / 14 / 8x16 / logo 14, centred row). */
:root{
  --cta-bg:transparent;--cta-ink:#F3F3F3;
  --cta-shadow:inset 0 0 0 1px #3A4656;
  --cta-bg-hover:#1A1F26;--cta-shadow-hover:inset 0 0 0 1px #3A4656;
  --cta-bg-press:#0A0D12;--cta-shadow-press:inset 0 0 0 1px #3A4656;
  --cta-focus:0 0 0 2px var(--color-bg),0 0 0 4px #F59E0B;
  --cta-ghost-border:#3A4656;--cta-ghost-border-hover:#5A6679;--cta-ghost-bg-hover:#1A1F26;
  --cta-logo-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M24 24L4.95 13A22 22 0 0 1 43.05 13Z' fill='%23EA4335'/%3E%3Cpath d='M24 24L43.05 13A22 22 0 0 1 24 46Z' fill='%23FBBC05'/%3E%3Cpath d='M24 24L24 46A22 22 0 0 1 4.95 13Z' fill='%2334A853'/%3E%3Ccircle cx='24' cy='24' r='10.5' fill='%23FFFFFF'/%3E%3Ccircle cx='24' cy='24' r='8' fill='%234285F4'/%3E%3C/svg%3E");
}
:root[data-theme="light"]{
  --cta-bg:#FFFFFF;--cta-ink:#061236;
  --cta-shadow:inset 0 0 0 1px #D5DAE5,0 1px 2px #3D47531F;
  --cta-bg-hover:#FFFFFF;--cta-shadow-hover:inset 0 0 0 1px #B9C0CF,0 2px 4px #3D475333;
  --cta-bg-press:#F7F7F7;--cta-shadow-press:inset 0 0 0 1px #D5DAE5;
  --cta-focus:0 0 0 2px #FFFFFF,0 0 0 4px #F59E0B;
  --cta-ghost-border:#D5DAE5;--cta-ghost-border-hover:#B9C0CF;--cta-ghost-bg-hover:#F7F7F7;
}
:is(.btn.btn-cta,.btn.hero-cta){
  --cta-fs:13px;--cta-brush:15px;--cta-pad:10px 20px;--cta-logo:16px;--cta-gap:4px;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--cta-gap);height:auto;padding:var(--cta-pad);border:0;border-radius:var(--radius-sm);
  background:var(--cta-bg);color:var(--cta-ink);box-shadow:var(--cta-shadow);font-family:var(--font-body);font-weight:var(--weight-medium);
  font-size:var(--cta-fs);line-height:17px;text-decoration:none;white-space:nowrap;transition:background-color .12s,box-shadow .12s}
:is(.btn.btn-cta,.btn.hero-cta)::before{content:"";flex:none;width:var(--cta-logo);height:var(--cta-logo);background:var(--cta-logo-img) center/contain no-repeat}
:is(.btn.btn-cta,.btn.hero-cta) .brush{font-size:var(--cta-brush);line-height:17px}
:is(.btn.btn-cta,.btn.hero-cta):hover{background:var(--cta-bg-hover);box-shadow:var(--cta-shadow-hover);opacity:1}
:is(.btn.btn-cta,.btn.hero-cta):active{background:var(--cta-bg-press);box-shadow:var(--cta-shadow-press)}
:is(.btn.btn-cta,.btn.hero-cta):focus-visible{outline:0;box-shadow:var(--cta-shadow),var(--cta-focus)}
.btn.btn-cta--lg{--cta-fs:15px;--cta-brush:17px;--cta-pad:14px 28px;--cta-logo:20px;--cta-gap:6px}
.btn.btn-cta--sm{--cta-fs:12px;--cta-brush:14px;--cta-pad:8px 16px;--cta-logo:14px;--cta-gap:6px;line-height:16px}
.btn.btn-cta--sm .brush{line-height:16px}
@media (max-width:599px){
  .btn.btn-cta{--cta-fs:12px;--cta-brush:14px;--cta-pad:8px 16px;--cta-logo:14px;--cta-gap:6px;line-height:16px}
  .btn.btn-cta .brush{line-height:16px}
}