/* PathMosaic's look, in one place.
   Every colour, font, corner and width the site uses is named here, and
   style.css refers only to these names. To restyle the site, change the values
   below; nothing else needs to change. (The share-card image is drawn in
   Python and has its own short list at the top of src/pipeline/cards.py —
   keep the two in step.)

   Current look (Oct 21, "sleek"): a white page, one big figure per idea in
   heavy, tightly set type, soft tinted tiles with rounded corners instead of
   bordered boxes, pill-shaped buttons and search, a few dark panels for rhythm,
   and motion that reveals a figure once as it scrolls into view (never on
   people who ask their device for less motion). Earlier look (Sept 28): a
   light-grey page with white bordered cards and small corners. */

/* Fonts are served from this site (static/fonts, SIL Open Font License), so no
   visitor's address goes to a font host. Fraunces is kept for reference but
   unused unless --heading-font names it. */
@font-face {
  font-family: "Public Sans";
  src: url("fonts/public-sans.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("fonts/public-sans-italic.woff2") format("woff2");
  font-weight: 100 900; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  color-scheme: light;

  /* --- Page and surfaces -------------------------------------------------- */
  --bg: #FFFFFF;            /* page background */
  --surface: #FFFFFF;       /* cards, header, inputs */
  --paper: #F3F6FB;         /* quiet panels inside cards */
  --line: #E5E7EB;          /* card borders and dividers */
  --line-soft: #F3F4F6;     /* faint dividers inside cards */
  --field-line: #D1D5DB;    /* form field borders */
  --shadow: none;           /* panels have no shadow; their tint defines them */
  --tile: #F3F6FB;          /* figure tiles: pay, openings, education */
  --panel: #F7F8FA;         /* larger panels: forms, the chart, report headers */
  --ink-panel: #0B1120;     /* the few dark panels (AI exposure, closing calls) */
  --ink-panel-text: #FFFFFF;
  --ink-panel-sub: #CBD5E1;
  --lift-shadow: 0 24px 60px rgba(17, 24, 39, .10);   /* the home page's example card */
  --popup-shadow: 0 8px 24px rgba(17, 24, 39, .12);

  /* --- Text ------------------------------------------------------------------ */
  --text: #111827;
  --text-2: #374151;
  --muted: #6B7280;

  /* --- The brand colour: primary buttons only -------------------------------- */
  --accent: #0E5E57;
  --accent-hover: #0A4540;
  --accent-tint: #F3F4F6;   /* selected chips, pressed states */

  /* --- The logo (Oct 18): the stepping path and the other tiles ------------- */
  --logo-path: #0E5E57;     /* also "Mosaic" in the wordmark; keep with pipeline/brand.py */
  --logo-tile: #E5E7EB;

  /* --- Links, labels, small icons -------------------------------------------- */
  --link: #1F2937;
  --link-hover: #111827;
  --link-underline: #9CA3AF;
  --kicker: #6B7280;        /* small caps labels above headings */
  --icon: #6B7280;          /* decorative icons */
  --ok: #0F7B5C;            /* ticks meaning "done" */

  /* --- Secondary buttons ------------------------------------------------------ */
  --button-2-bg: #FFFFFF;
  --button-2-text: #111827;
  --button-2-border: #D1D5DB;
  --button-2-hover-bg: #F9FAFB;
  --card-hover-border: #9CA3AF;   /* the two path cards on the home page */

  /* --- Header and menus -------------------------------------------------------- */
  --header-bg: #FFFFFF;
  --nav-link: #4B5563;
  --nav-hover-bg: #F3F4F6;
  --nav-active-bg: #F3F4F6;       /* the current page's menu item */
  --preview-bg: #F3F4F6;
  --preview-text: #4B5563;

  /* --- "How to read this" notes and alerts ----------------------------------- */
  --guide-bg: #F9FAFB;
  --guide-line: #E5E7EB;
  --warn: #8A4F0E;
  --warn-bg: #FBF4E8;

  /* --- Type ----------------------------------------------------------------- */
  --sans: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --heading-font: var(--sans);    /* set to "Fraunces", Georgia, serif for the old look */
  --heading-weight: 800;
  --heading-tracking: -0.025em;
  --display-weight: 900;          /* page titles and the big figures */
  --display-tracking: -0.035em;
  --title-size: clamp(40px, 6.2vw, 76px);    /* a page's or card's title */
  --section-size: clamp(28px, 3.6vw, 44px);  /* a section's heading */
  --figure-size: clamp(30px, 3.4vw, 40px);   /* a figure in a tile */
  --hero-size: clamp(40px, 6.5vw, 76px);     /* the home page headline */
  --hero-size-phone: 40px;

  /* --- Shape ---------------------------------------------------------------- */
  --radius: 10px;                 /* inputs and small boxes */
  --radius-lg: 16px;              /* tiles */
  --radius-xl: 24px;              /* panels */
  --pill: 999px;                  /* chips and exposure labels */

  /* --- Widths ---------------------------------------------------------------- */
  --page-max: 1180px;             /* most pages */
  --landing-max: 56rem;           /* the home page: a little wider than its intro text */
  --text-max: 46rem;              /* comfortable line length for paragraphs */

  /* --- Data colours: these carry meaning, change with care ------------------- */
  /* AI exposure: one hue, light to dark, so no level looks "bad". */
  --x-low: #C9DDFF;
  --x-mod: #7FAEFF;
  --x-high: #2F6FE0;
  --x-vhigh: #0F2F86;
  /* Projected growth: green up, red-orange down (checked for colour-blind readers). */
  --grow-up: #0F7B5C;
  --grow-down: #C4461B;
  --grow-up-bg: #E4F2EC;
  --grow-down-bg: #FBEAE3;
  /* How people used Claude: handed off vs. worked together. */
  --handed: #5B3FD0;
  --together: #E8A317;
  /* Task ratings (Eloundou et al.): the exposure scale's two darkest blues,
     and grey for "not much"; an outline for a task with no rating. Keep in
     step with the share images (cards.py). */
  --task-alone: #0F2F86;
  --task-software: #2F6FE0;
  --task-notmuch: #E5E7EB;
  --task-count: #2F6FE0;   /* "15 of its 17 tasks" */
  /* Copilot by work activity: asked for help, and AI did it. */
  --use-help: #7FAEFF;
  --use-did: #0E5E57;
}