/* GENERATED from src/ui/tokens.ts by scripts/build-home.ts (run by vite build). Do not edit by hand:
   home.test.ts fails when this file and tokens.ts disagree. */

@font-face {
  font-family: 'IBM Plex Serif';
  src: url('/planner/fonts/IBMPlexSerif-Regular-Latin1.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Serif';
  src: url('/planner/fonts/IBMPlexSerif-Medium-Latin1.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Serif';
  src: url('/planner/fonts/IBMPlexSerif-SemiBold-Latin1.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Serif';
  src: url('/planner/fonts/IBMPlexSerif-Bold-Latin1.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/planner/fonts/IBMPlexSans-Regular-Latin1.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/planner/fonts/IBMPlexSans-Medium-Latin1.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/planner/fonts/IBMPlexSans-SemiBold-Latin1.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/planner/fonts/IBMPlexSans-Bold-Latin1.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/planner/fonts/IBMPlexMono-Regular-Latin1.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-serif: 'IBM Plex Serif', Georgia, 'Times New Roman', serif;
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, Menlo, monospace;

  --weight-display: 700;
  --weight-body: 400;
  --weight-strong: 600;
  --weight-wordmark: 700;

  --t-micro: 10px;
  --t-0: 11px;
  --t-1: 12px;
  --t-2: 13px;
  --t-3: 14px;
  --t-4: 16px;
  --t-lead: 17px;
  --t-lead-lg: 18px;
  --t-5: 20px;
  --t-6: 26px;
  --lh-body: 1.5;
  --lh-heading: 1.25;
  --lh-display: 1.1;

  /* the display ramp, read out of the four approved packs */
  --d-1: 50px;
  --d-2: 42px;
  --d-3: 40px;
  --d-4: 39px;
  --d-5: 38px;
  --d-6: 34px;
  --d-7: 33px;
  --d-8: 31px;
  --d-9: 30px;
  --d-10: 29px;
  --d-11: 28px;
  --d-12: 27px;
  --d-13: 25px;
  --d-14: 24px;
  --d-15: 21px;

  --measure: 72ch;
  --measure-lead: 790px;
  --page: 760px;
  --table: 1040px;

  /* the content column each approved surface sets */
  --w-home: 1040px;
  --w-connect: 1040px;
  --w-plan: 1240px;
  --w-readiness: 1200px;
  --w-export: 1040px;
  --w-how: 1040px;
  --w-inventory: 1240px;

  --pad: 24px;
  --header: 48px;
  --control: 32px;
  --radius: 4px;
  --radius-control: 8px;
  --radius-panel: 12px;
  --motion: 120ms;
  --motion-disclosure: 200ms;
  --focus-ring: 0 0 0 2px var(--brand-primary);

  /* light: Mineral Teal */
  --canvas: #f7f4ee;
  --surface: #fffdf9;
  --secondary-surface: #f0ece5;
  --line: #d8d3c9;
  --strong-line: #c1bcb3;
  --primary-text: #1d2528;
  --secondary-text: #4e5b5d;
  --muted-text: #7b8584;
  --brand-primary: #0c6a64;
  --brand-secondary: #18847a;
  --brand-soft: #ddefea;
  --brand-soft-text: #07534f;
  --success: #2c7a5a;
  --attention: #b7791f;
  --danger: #b04a4a;
  --admin: #6658a4;
  --code-surface: #eeeae3;
  --on-brand: #fffdf9;
  --quiet-text: #626a6a;
  --idle: #7b8584;
  --unproven: #9e5014;
  --success-text: #2a7456;
  --attention-text: #895b17;
  --danger-text: #a74646;
  --admin-text: #6658a4;
  --unproven-text: #9e5014;
  --brand-secondary-text: #147068;
  --shadow-panel: 0 10px 30px rgba(29, 37, 40, 0.08);

  /* the MFA readiness ladder: a colour per rung, from the palette */
  --rung-5: var(--success-text);
  --rung-4: var(--brand-primary);
  --rung-3: var(--attention-text);
  --rung-2: var(--unproven-text);
  --rung-1: var(--danger-text);
  --rung-0: var(--idle);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --canvas: #0d1117;
    --surface: #151c25;
    --secondary-surface: #111821;
    --line: #2b3745;
    --strong-line: #39495a;
    --primary-text: #f2f5f7;
    --secondary-text: #c7d0d8;
    --muted-text: #8f9aa6;
    --brand-primary: #58c8bc;
    --brand-secondary: #78d9ce;
    --brand-soft: #173a3d;
    --brand-soft-text: #dffff9;
    --success: #79d7a6;
    --attention: #e3b35b;
    --danger: #e88a8a;
    --admin: #b9a7ff;
    --code-surface: #0a0f15;
    --on-brand: #0d1117;
    --quiet-text: #8f9aa6;
    --idle: #8f9aa6;
    --unproven: #c98a2e;
    --success-text: #79d7a6;
    --attention-text: #e3b35b;
    --danger-text: #e88a8a;
    --admin-text: #b9a7ff;
    --unproven-text: #c98a2e;
    --brand-secondary-text: #78d9ce;
    --shadow-panel: 0 18px 45px rgba(0, 0, 0, 0.32);
  }
}

:root[data-theme='dark'] {
  --canvas: #0d1117;
  --surface: #151c25;
  --secondary-surface: #111821;
  --line: #2b3745;
  --strong-line: #39495a;
  --primary-text: #f2f5f7;
  --secondary-text: #c7d0d8;
  --muted-text: #8f9aa6;
  --brand-primary: #58c8bc;
  --brand-secondary: #78d9ce;
  --brand-soft: #173a3d;
  --brand-soft-text: #dffff9;
  --success: #79d7a6;
  --attention: #e3b35b;
  --danger: #e88a8a;
  --admin: #b9a7ff;
  --code-surface: #0a0f15;
  --on-brand: #0d1117;
  --quiet-text: #8f9aa6;
  --idle: #8f9aa6;
  --unproven: #c98a2e;
  --success-text: #79d7a6;
  --attention-text: #e3b35b;
  --danger-text: #e88a8a;
  --admin-text: #b9a7ff;
  --unproven-text: #c98a2e;
  --brand-secondary-text: #78d9ce;
  --shadow-panel: 0 18px 45px rgba(0, 0, 0, 0.32);
}

@media print {
  :root,
  :root[data-theme='dark'] {
    --canvas: #f7f4ee;
    --surface: #fffdf9;
    --secondary-surface: #f0ece5;
    --line: #d8d3c9;
    --strong-line: #c1bcb3;
    --primary-text: #1d2528;
    --secondary-text: #4e5b5d;
    --muted-text: #7b8584;
    --brand-primary: #0c6a64;
    --brand-secondary: #18847a;
    --brand-soft: #ddefea;
    --brand-soft-text: #07534f;
    --success: #2c7a5a;
    --attention: #b7791f;
    --danger: #b04a4a;
    --admin: #6658a4;
    --code-surface: #eeeae3;
    --on-brand: #fffdf9;
    --quiet-text: #626a6a;
    --idle: #7b8584;
    --unproven: #9e5014;
    --success-text: #2a7456;
    --attention-text: #895b17;
    --danger-text: #a74646;
    --admin-text: #6658a4;
    --unproven-text: #9e5014;
    --brand-secondary-text: #147068;
    --shadow-panel: 0 10px 30px rgba(29, 37, 40, 0.08);
  }
}

/* The soft tint of each semantic role: one formula, four roles. Composed from
   the theme's own values, so it follows light, dark and print with them. */
:root {
  --brand-tint: color-mix(in srgb, var(--brand-primary) 12%, var(--canvas));
  --success-tint: color-mix(in srgb, var(--success) 12%, var(--canvas));
  --attention-tint: color-mix(in srgb, var(--attention) 12%, var(--canvas));
  --danger-tint: color-mix(in srgb, var(--danger) 12%, var(--canvas));
  --success-line: color-mix(in srgb, var(--success) 36%, var(--line));
  --attention-line: color-mix(in srgb, var(--attention) 36%, var(--line));
  --danger-line: color-mix(in srgb, var(--danger) 36%, var(--line));
  --scrim: color-mix(in srgb, var(--canvas) 75%, transparent);
}