/* Authorized Path Forward · tokens.css
   This site's own token set, structured on the static-sites design system
   (static-sites/docs/DESIGN_SYSTEM.md, §1 to §6, named as §12 says). Each
   design value is defined here once; the other stylesheets only consume
   var(--token).

   Fonts: one system sans stack for headings and body. No web font is
   loaded: no request leaves authorize-path.com, and each page stays far
   under the 150 KB budget (SITE §4).

   Palette: a deep green ink on white; the pale green of the email's code
   box as the one accent (its background #ecffeb, its border #a7d9b2, its
   digits #1f7440); and one neutral, a slate grey, for secondary text, the
   borders and the email picture's backdrop (#f4f6f8, the email's own page
   color).
   Contrast (WCAG 2.2 AA, text at least 4.5:1), computed 2026-10-14:
     light  ink #15311f on white 14.1:1, on slate #f4f6f8 13.0:1,
            on the accent #ecffeb 13.5:1
            secondary #52606d 6.5:1 / 6.0:1 / 6.2:1
            link and digits #1f7440 6.1:1 / 5.7:1 / 5.9:1; the hover
            #175a32 8.3:1; white on the button 6.1:1
     dark   text #e6ece7 on the page #0f1a13 14.9:1, on the panel
            #172219 13.7:1
            secondary #aab6ad 8.5:1 / 7.8:1
            link #8fd3a6 10.2:1 / 9.4:1; page ink on the button 10.2:1
            digits #a7e3bb on the code box #163523 9.2:1 */

:root {
  color-scheme: light;

  /* Brand slots (§1.1) */
  --brand-ink: #15311f;          /* deep green ink: text and headings */
  --brand-primary: #1f7440;      /* the digits' green: links, the button, the route in the mark */
  --brand-accent: #ecffeb;       /* the pale green of the code box */
  --brand-accent-edge: #a7d9b2;  /* the code box's border; the band at the top of the page */
  --brand-surface: #ffffff;      /* the page */

  /* Text (§1.2) */
  --color-text-primary: var(--brand-ink);
  --color-text-secondary: #52606d;   /* the one neutral, the email's own grey */
  --color-text-on-dark: #e6ece7;
  --color-link: var(--brand-primary);
  --color-link-hover: #175a32;

  /* Surfaces and borders (§1.3) */
  --color-surface-page: var(--brand-surface);
  --color-surface-container: #f4f6f8;   /* slate: panels, the email picture's backdrop */
  --color-surface-accent: var(--brand-accent);
  --color-border-container: #d9dee3;
  --color-border-accent: var(--brand-accent-edge);
  --color-frame-bg: var(--brand-surface);

  /* Button (§1.4) */
  --color-button-primary-bg: var(--brand-primary);
  --color-button-primary-hover: #175a32;
  --color-button-text-on-primary: #ffffff;

  /* The code box in the picture of our email, as the email draws it */
  --color-code: #1f7440;
  --color-code-bg: #ecffeb;
  --color-code-border: #a7d9b2;

  /* Focus (§4.2) */
  --color-focus: var(--brand-primary);
  --outline-width: 3px;
  --outline-offset: 2px;

  /* Type (§2) */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --text-sm: 1rem;             /* 16 px: the footer, captions, the picture's small print; nothing is smaller */
  --text-base: 1.0625rem;      /* 17 px: body */
  --text-md: 1.1875rem;        /* 19 px: lead paragraphs, h3, the brand */
  --text-lg: 1.375rem;         /* 22 px: h2 */
  --text-xlg: 1.875rem;        /* 30 px: h1 */
  --text-xxlg: 2.25rem;        /* 36 px: h1 from the md breakpoint */
  --text-mail-heading: 1.5rem; /* 24 px: the email's heading, as sent */
  --text-code: 2.125rem;       /* 34 px: the code's digits, as sent */
  --leading-tight: 1.2;
  --leading-base: 1.6;

  /* Space (§3.1) */
  --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;

  /* Widths (§3.2) */
  --measure-text: 64ch;
  --max-content-width: 44rem;

  /* Radii, borders, shadow (§4) */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-card: 18px;         /* the email's card */
  --border-thin: 1px;
  --border-medium: 2px;
  --border-band: 6px;          /* the green band at the top of the page, the accent edge of a card */
  --shadow-low: 0 1px 2px rgba(21, 49, 31, 0.08);

  /* Motion (§6.2): only a link's color changes, and not under reduced motion */
  --motion-fast: 120ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* Z-index (§6.1) */
  --z-content: 1;
  --z-sticky: 100;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --brand-ink: #e6ece7;
    --brand-primary: #8fd3a6;
    --brand-accent: #163523;
    --brand-accent-edge: #2f6b47;
    --brand-surface: #0f1a13;
    --color-text-secondary: #aab6ad;
    --color-link-hover: #b4e4c5;
    --color-surface-container: #172219;
    --color-border-container: #2b3a30;
    --color-button-primary-hover: #b4e4c5;
    --color-button-text-on-primary: #0f1a13;
    --color-code: #a7e3bb;
    --color-code-bg: #163523;
    --color-code-border: #2f6b47;
    --shadow-low: 0 1px 2px rgba(0, 0, 0, 0.35);
  }
}