/* ==========================================================================
   Design tokens
   Every design value used by main.css lives here. Change a value here,
   never in main.css.
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------------
     Color
     Derived from the Toa Tech logo (assets/img/logo-full.jpg): logo navy,
     near-black ink, and neutral chrome silver. Where a logo color failed
     contrast it was adjusted, never the other way round.

     Contrast ratios below are computed (WCAG 2.x relative luminance), not
     estimated. Re-run the calculation and update these comments whenever a
     color changes.

     Light surfaces: text (needs >= 4.5:1; large text >= 3:1)
       --color-text          on --color-bg           16.76:1
       --color-text          on --color-surface      18.29:1
       --color-text          on --color-surface-alt  15.29:1
       --color-text-muted    on --color-bg            7.58:1
       --color-text-muted    on --color-surface       8.26:1
       --color-text-muted    on --color-surface-alt   6.91:1
       --color-accent        on --color-bg           11.73:1
       --color-accent        on --color-surface      12.79:1
       --color-accent        on --color-surface-alt  10.70:1
       --color-accent-strong on --color-bg           14.99:1
       --color-accent-strong on --color-surface      16.35:1
       --color-accent-strong on --color-surface-alt  13.68:1
       --color-on-accent     on --color-accent       12.79:1
       --color-on-accent     on --color-accent-strong 16.35:1

     Dark surfaces (header, footer): text
       --color-silver        on --color-ink          11.63:1
       --color-silver-bright on --color-ink          16.44:1
       --color-silver-muted  on --color-ink           8.02:1
       --color-ink           on --color-silver       11.63:1  (button on dark)
       --color-ink           on --color-silver-bright 16.44:1

     Non-text UI (needs >= 3:1)
       --color-focus         on --color-bg           11.73:1
       --color-focus         on --color-surface      12.79:1
       --color-focus         on --color-surface-alt  10.70:1
       --color-focus-inverse on --color-ink          11.63:1
       --color-border-strong on --color-bg            3.87:1  (control edges)
       --color-border-strong on --color-surface       4.22:1
       --color-silver-muted  on --color-ink           8.02:1  (control edges on dark)
       --color-border        on --color-surface       1.43:1  (decorative
         hairlines only: never the sole boundary of an interactive control)

     Do not use: --color-accent on --color-ink is 1.47:1. Navy is for light
     surfaces only; dark surfaces use the silver tokens and focus-inverse.
     ------------------------------------------------------------------------ */
  --color-bg: #f4f5f7;              /* page background, cool near-white */
  --color-surface: #ffffff;         /* cards */
  --color-surface-alt: #e8ebef;     /* alternating section band, pale silver */
  --color-text: #0f1520;
  --color-text-muted: #474f5c;
  --color-accent: #1d3350;          /* logo navy: links, buttons, eyebrows, icons */
  --color-accent-strong: #0f2038;   /* hover / active state of accent */
  --color-on-accent: #ffffff;       /* text on accent fills */
  --color-border: #d3d8df;
  --color-border-strong: #737c8a;
  --color-focus: #1d3350;

  --color-ink: #0c121c;             /* logo black-navy: header and footer */
  --color-silver: #c7ccd4;          /* logo chrome: text and buttons on ink */
  --color-silver-bright: #eef0f3;   /* headings and hover on ink */
  --color-silver-muted: #a3aab5;    /* secondary text and borders on ink */
  --color-focus-inverse: #c7ccd4;   /* focus ring on ink */
  --color-border-inverse: #2b3545;  /* decorative hairline on ink */

  /* ------------------------------------------------------------------------
     Typography
     System font stack only: no web fonts.
     ------------------------------------------------------------------------ */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono",
    monospace;

  --text-sm: 0.9375rem;   /* 15px */
  --text-base: 1.0625rem; /* 17px */
  --text-md: 1.125rem;    /* 18px */
  --text-lg: 1.3125rem;   /* 21px: h3 */
  --text-xl: 1.75rem;     /* 28px: h2, mobile */
  --text-2xl: 2.25rem;    /* 36px: h2 desktop / h1 mobile */
  --text-3xl: 3.25rem;    /* 52px: h1 desktop */

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-body: 1.6;

  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;

  --tracking-eyebrow: 0.08em;
  --tracking-wordmark: 0.06em;

  --measure: 65ch;        /* paragraph line length */
  --measure-heading: 30ch; /* hero heading line length */

  /* ------------------------------------------------------------------------
     Spacing (rem so it scales with the user's font size)
     ------------------------------------------------------------------------ */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 6.5rem;

  --gutter: var(--space-sm);           /* page side padding, mobile */
  --gutter-wide: var(--space-lg);      /* page side padding, desktop */
  --section-pad: var(--space-2xl);     /* vertical section padding, mobile */
  --section-pad-wide: var(--space-3xl);

  /* ------------------------------------------------------------------------
     Layout
     Breakpoints cannot be custom properties inside @media, so main.css uses
     these values literally and names them in a comment:
       --bp-md: 48em  (768px at default font size)
       --bp-lg: 64em  (1024px)
     ------------------------------------------------------------------------ */
  --container-max: 68.75rem;      /* ~1100px */
  --header-height: 4.5rem;        /* used for scroll-margin-top */

  /* ------------------------------------------------------------------------
     Shape and depth
     ------------------------------------------------------------------------ */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --border-width: 1px;            /* hairline */
  --border-width-thick: 2px;      /* outlined buttons */
  --shadow-soft: 0 1px 2px rgb(22 28 39 / 0.04), 0 4px 16px rgb(22 28 39 / 0.05);

  /* ------------------------------------------------------------------------
     Interaction
     ------------------------------------------------------------------------ */
  --focus-width: 3px;             /* >= 2px required */
  --focus-offset: 2px;
  --target-min: 2.75rem;          /* 44px: menu button, CTAs, mobile nav */
  --target-sm: 1.5rem;            /* 24px: WCAG 2.2 minimum for any target */
  --icon-size: 2rem;
  --logo-mark-size: 2.75rem;       /* header circle mark height */
  --logo-full-width-md: 14rem;     /* hero logo, tablet */
  --logo-full-width: 20rem;        /* hero logo, desktop */
  --icon-stroke: 1.75;

  --duration-fast: 150ms;
  --ease-standard: ease;
}