/* Precision Aviator tokens, unbranded, extracted from design/prototype.html.
   Light surfaces only. There is no dark mode and none is planned: the emails
   have to look like a real Outlook window, and Outlook's reading pane is white
   for the staff this ships to. */

:root {
  /* Semantic colour. The split matters and is easy to get wrong:
     red marks the malicious element in an email, amber marks the moment the
     learner was caught out, green marks safe or complete. Neither red nor
     amber ever describes the person. */
  --primary: #bb0013;
  --primary-container: #e71520;
  --secondary: #486800;
  --warning: #b45309;
  --error: #ba1a1a;

  /* Darkened variants of the above, for text on their own tinted surfaces.
     The raw tokens do not clear 4.5:1 as small text on a 9% tint. */
  --on-warning-container: #8a3f07;
  --on-warning-container-body: #5c3210;
  --on-secondary-container: #38510a;
  --on-secondary-container-body: #33440f;
  --on-error-container: #7a1512;
  --on-error-container-body: #5d1310;
  --on-error-icon: #8c1210;

  /* Tonal surface ladder. The style system prefers these over borders. */
  --surface: #f8f9fa;
  --s-lowest: #ffffff;
  --s-low: #f3f4f5;
  --s-mid: #edeeef;
  --s-high: #e7e8e9;
  --s-highest: #e1e3e4;
  --s-dim: #d9dadb;

  --on-surface: #191c1d;
  --on-variant: #5e3f3c;
  --outline-variant: #e8bcb7;
  --error-container: #ffdad6;

  /* The one grey used for secondary text anywhere. Real Outlook secondary grey
     is around #666 on white, which measures 4.2:1 and fails WCAG AA. This is
     darkened to 6.1:1 and is why the mock-ups are not pixel-faithful. */
  --muted: #5a6165;
  --placeholder: #7b8286;

  /* The blue Outlook renders links in, darkened to clear 4.5:1 on white. */
  --link: #1a4f8a;

  --shadow-card: 0 10px 30px rgba(25, 28, 29, .06);
  --shadow-lift: 0 18px 44px rgba(25, 28, 29, .10);
  --shadow-appbar: 0 1px 0 rgba(25, 28, 29, .045), 0 6px 18px rgba(25, 28, 29, .03);
  --shadow-primary: 0 6px 18px rgba(187, 0, 19, .22);
  --shadow-primary-hover: 0 12px 26px rgba(187, 0, 19, .28);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.0, 0, 0.2, 1);
  --dur: 200ms;

  --r-btn: 12px;
  --r-card: 12px;
  --r-region: 10px;
  --r-lg: 18px;
  --r-pill: 999px;

  /* Type scale. Body is 0.875rem at 1.6, fixed by the project brief. */
  --t-display: clamp(2.35rem, 6.2vw, 3.5rem);
  --t-headline: clamp(1.35rem, 3.1vw, 1.75rem);
  --t-title: 1.0625rem;
  --t-lede: 1.0625rem;
  --t-body: .875rem;
  --t-small: .8125rem;
  --t-fine: .75rem;
  --t-label: .6875rem;
  --t-micro: .625rem;

  --lh-body: 1.6;
  --lh-mail: 1.7;

  /* Spacing. Four-point base; the fluid ones exist because the app shell has to
     hold together from 360px to desktop without a breakpoint at every step. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --stage-pad-x: clamp(16px, 4vw, 54px);
  --stage-pad-top: clamp(24px, 4.4vw, 54px);
  --stage-pad-bottom: clamp(32px, 5vw, 60px);
  --mail-pad: clamp(16px, 2.6vw, 26px);

  /* The accessibility floor, named so it cannot drift. WCAG 2.2 SC 2.5.8 sets
     the 24px minimum; 44px is the target this app actually holds to. */
  --hit-min: 44px;
}