/* Design tokens for sncsoftware.ca.
   Source of truth: snc-software-landing-brief.md, section 3.
   Every colour, size, and spacing value in styles.css must come from here. */

:root {
  /* surfaces */
  --paper:       #F6F7F5;  /* page background */
  --panel:       #E7E9E4;  /* recessed blocks, quoted areas, form background */
  --white:       #FFFFFF;  /* input fields and raised elements only */
  --ink:         #131E24;  /* primary text, dark section background */
  --ink-soft:    #3C4E56;  /* secondary text */
  --muted:       #6B7C83;  /* large meta only (24px and up): 4.0:1 on paper, fails AA at small sizes */
  --line:        #D3D8D2;  /* 1px rules and borders */

  /* accents */
  --signal:      #0B6E5F;  /* primary action, links, active states */
  --signal-deep: #084F45;  /* hover and pressed */
  --signal-tint: #E3EFEB;  /* selected rows, subtle highlight fills */
  --brass:       #D8A32E;  /* sparing highlight: underlines, markers, focus ring */

  /* feedback */
  --error:       #A62E2B;  /* form errors only */
  --success:     #0B6E5F;

  /* on dark sections (additions to the brief, needed for AA contrast on --ink) */
  --on-ink-soft:   #A9B8BC;  /* secondary text on --ink, 8.3:1 */
  --ink-line:      #2B3A41;  /* 1px rules on --ink */
  --ink-deep:      #0D161B;  /* recessed panel inside an --ink section */
  --signal-on-ink: #7CCFC0;  /* progress and posted states on --ink, 9.3:1 */

  /* type */
  /* The "Fallback" faces are metric matched local fonts declared in styles.css,
     so text does not reflow when the web fonts arrive. */
  --font-display: "Archivo", "Archivo Fallback", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", "Plex Sans Fallback", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --text-xs:   0.8125rem;                         /* 13px, meta and captions */
  --text-sm:   0.9375rem;                         /* 15px, secondary body */
  --text-base: 1.0625rem;                         /* 17px, body */
  --text-lg:   clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-xl:   clamp(1.5rem, 1.25rem + 1.1vw, 2rem);
  --text-2xl:  clamp(2rem, 1.6rem + 1.9vw, 2.75rem);
  --text-3xl:  clamp(2.75rem, 2rem + 3.4vw, 4.25rem);   /* hero only */

  --leading-tight: 1.08;
  --leading-snug:  1.3;
  --leading-lead:  1.45;  /* hero paragraph at --text-lg */
  --leading-body:  1.6;

  --tracking-display: -0.02em;
  --tracking-heading: -0.01em;

  /* spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 144px;

  --container: 1360px;  /* the brief says 1180px; widened at the owner's request so the page fills the screen */
  --gutter: clamp(20px, 5vw, 64px);
  --measure: 52ch;   /* about 70 characters of Plex Sans. The brief's 66ch measures 85, outside its own 60 to 72 range */
  --span-8: calc((var(--container) - 11 * var(--space-5)) / 12 * 8 + 7 * var(--space-5));  /* columns 1 to 8 */

  /* fixed sizes */
  --header-h: 72px;
  --control-h: 48px;     /* buttons and inputs */
  --control-h-sm: 44px;  /* header button, smallest allowed tap target */
  --rule: 1px;
  --rule-strong: 2px;
  --outline: 2px;        /* focus ring width and offset */
  --frame-w: 882px;      /* smallest width of the preview illustration at desktop */

  /* radii, borders, elevation */
  --radius-input: 3px;   /* buttons, inputs, tags */
  --radius-panel: 8px;   /* content panels and work entries */
  --radius-media: 12px;  /* screenshots and images */
  --border: 1px solid var(--line);
  --shadow-overlay: 0 12px 32px rgba(19, 30, 36, 0.18);  /* mobile menu only */

  /* motion */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --fast: 120ms;
  --medium: 200ms;
  --settle: 240ms;       /* hero load sequence: one element */
  --settle-step: 40ms;   /* hero load sequence: stagger, about 400ms in total */
}