/* Site stylesheet for r2practice.com. Hand-maintained — see landing/README.md.
 *
 * Originally the K12 Safety design-system token files from the Claude Design
 * export, concatenated in cascade order (base.css consumes the custom
 * properties the blocks above define, so the order is load-bearing).
 *
 * Inter 4.001 (https://rsms.me/, git-66647c0bb), subsetted to latin + U+2190-2193
 * and converted to WOFF2; the README has the command.
 */
@font-face{font-family:"Inter";src:url("/assets/fonts/Inter18pt-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/assets/fonts/Inter18pt-Italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Inter";src:url("/assets/fonts/Inter18pt-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/assets/fonts/Inter18pt-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
/* colors.css */
:root{
/* ---- Primary ---- */
--k12-dark-blue:#015FEA;
--k12-gradient-blue-from:#015FEA;
--k12-gradient-blue-to:#00C0F5;
--k12-gradient-green-from:#18BE79;
--k12-gradient-green-to:#00C0F5;
--k12-gradient-blue:linear-gradient(90deg,#015FEA 0%,#00C0F5 100%); /* @kind color */
--k12-gradient-green:linear-gradient(90deg,#18BE79 0%,#00C0F5 100%); /* @kind color */
/* Approved protocol green (Gradients sheet) — distinct from the progress-bar green above */
--k12-gradient-green-protocol:linear-gradient(90deg,#04B22C 0%,#02D060 100%); /* @kind color */
--k12-gradient-alert:linear-gradient(90deg,#E52E31 0%,#FF5C5F 100%); /* @kind color */

/* ===== Protocol gradients (Gradients sheet) — horizontal, left to right ===== */
--gradient-shelter-in-place:linear-gradient(90deg,#F7A000 0%,#FF5B5F 100%); /* @kind color */
--gradient-secure:linear-gradient(90deg,#015FEA 0%,#00C0F5 100%); /* @kind color */
--gradient-evacuation:linear-gradient(90deg,#04B22C 0%,#02D060 100%); /* @kind color */
--gradient-lockdown:linear-gradient(90deg,#E52E31 0%,#FF5C5F 100%); /* @kind color */
--gradient-hold:linear-gradient(90deg,#8E74FF 0%,#55479A 100%); /* @kind color */

/* ===== Approved gradients (Gradients sheet) — horizontal, left to right ===== */
--k12-gradient-amber:linear-gradient(90deg,#F7A000 0%,#FF5B5F 100%); /* @kind color */
--k12-gradient-amber-hover:linear-gradient(90deg,#F9BB47 0%,#FF898C 100%); /* @kind color */
--k12-gradient-amber-active:linear-gradient(90deg,#CB8300 0%,#D14B4E 100%); /* @kind color */
--k12-gradient-red:linear-gradient(90deg,#E52E31 0%,#FF5C5F 100%); /* @kind color */
--k12-gradient-red-hover:linear-gradient(90deg,#EC696B 0%,#FF8A8C 100%); /* @kind color */
--k12-gradient-red-active:linear-gradient(90deg,#BC2628 0%,#D14B4E 100%); /* @kind color */
--k12-gradient-purple:linear-gradient(90deg,#8E74FF 0%,#55479A 100%); /* @kind color */
--k12-gradient-purple-hover:linear-gradient(90deg,#AE9BFF 0%,#857BB6 100%); /* @kind color */
--k12-gradient-purple-active:linear-gradient(90deg,#745FD1 0%,#463A7E 100%); /* @kind color */

/* ---- Secondary ---- */
--k12-lightest-blue:#F2F6FC;
--k12-light-blue:#CCE6FF;
--k12-black:#171717;
--k12-white:#FFFFFF;
--k12-silver-gray:#F4F5F9;
--k12-light-gray:#F8F9FA;
--k12-gray:#7C8C99;
--k12-narde-gray:#5D5D5D;
--k12-blue-ocean:#152556;

/* ---- Greyscale ramp ---- */
--k12-grey-black:#171717;
--k12-grey-700:#484F63;
--k12-grey-500:#BCBECA;
--k12-grey-400:#E9EBF0;

/* ---- Status: text / solid ---- */
--k12-status-in-progress:#015FEA;
--k12-status-waiting:#8E74FF;
--k12-status-rejected:#E52E31;
--k12-status-approved:#18BE79;
--k12-status-attention:#FF9900;

/* ---- Status: backgrounds (hex equivalents of 10% tints) ---- */
--k12-status-in-progress-bg:#E8F0FD;
--k12-status-waiting-bg:#F5F1FF;
--k12-status-rejected-bg:#FCEAEA;
--k12-status-approved-bg:#E8F9F2;
--k12-status-attention-bg:#FFF5E5;

/* ---- Alert ---- */
--k12-alert-error:#E52E31;
--k12-alert-error-to:#FF5C5F;

/* ================= Semantic aliases ================= */
--text-strong:var(--k12-black);
--text-body:var(--k12-grey-700);
--text-muted:var(--k12-gray);
--text-inverse:var(--k12-white);
--text-link:var(--k12-dark-blue);
--text-link-hover:#0148B4;

--surface-page:var(--k12-lightest-blue);
--surface-card:var(--k12-white);
--surface-sunken:var(--k12-silver-gray);
--surface-subtle:var(--k12-light-gray);
--surface-selected:var(--k12-light-blue);
--surface-inverse:var(--k12-blue-ocean);

--border-subtle:var(--k12-grey-400);
--border-default:var(--k12-grey-500);
--border-strong:var(--k12-grey-700);
--border-focus:var(--k12-dark-blue);

--action-primary:var(--k12-dark-blue);
--action-primary-hover:#0148B4;
--action-primary-active:#01379A;
--action-primary-disabled:var(--k12-grey-500);
--action-secondary-bg:var(--k12-white);
--action-secondary-hover-bg:#E8F0FD;
--action-danger:var(--k12-alert-error);
--action-danger-hover:#C41F22;

--focus-ring:0 0 0 3px rgba(1,95,234,.24); /* @kind shadow */

/* ===== Button states — measured from the kit's Buttons sheet ===== */
/* Primary: gradient, left to right */
--btn-primary:linear-gradient(90deg,#0167EA 0%,#00C0F5 100%); /* @kind color */
--btn-primary-hover:linear-gradient(90deg,#58A1FF 0%,#53DAFF 100%); /* @kind color */
--btn-primary-active:linear-gradient(90deg,#0453B9 0%,#0098C2 100%); /* @kind color */
--btn-disabled-bg:#BCBECA;
/* Secondary: pale blue fills */
--btn-secondary-bg:#CCE6FF;
--btn-secondary-hover-bg:#D9ECFF;
--btn-secondary-active-bg:#9ACEFF;
--btn-secondary-disabled-bg:#F2F2F2;
/* Outline / text: white or transparent, blue border, pale blue wash */
--btn-outline-border:#015FEA40;
--btn-wash:#E1ECFC;
/* Role tags — measured from the Tags, Roles & Status sheet */
--tag-bg:#F4F5F9;
--tag-selected-bg:#CCE6FF;
--tag-waiting-border:#E9EBF0;
--tag-waiting-fg:#8D93B5;
/* Danger */
--btn-danger:#FF5C5F;
--btn-danger-hover:#FE8587;
--btn-danger-active:#FF272A;
/* Protocol tiles: approved gradients, horizontal left to right */
--tile-blue:var(--k12-gradient-blue); /* @kind color */
--tile-blue-hover:linear-gradient(90deg,#488CF0 0%,#47D2F8 100%); /* @kind color */
--tile-blue-active:linear-gradient(90deg,#014EC0 0%,#009DC9 100%); /* @kind color */
--tile-green:var(--k12-gradient-green-protocol); /* @kind color */
--tile-green-hover:linear-gradient(90deg,#4AC867 0%,#49DD8D 100%); /* @kind color */
--tile-green-active:linear-gradient(90deg,#039224 0%,#02AB4F 100%); /* @kind color */
--tile-amber:var(--k12-gradient-amber); /* @kind color */
--tile-amber-hover:var(--k12-gradient-amber-hover); /* @kind color */
--tile-amber-active:var(--k12-gradient-amber-active); /* @kind color */
--tile-red:var(--k12-gradient-red); /* @kind color */
--tile-red-hover:var(--k12-gradient-red-hover); /* @kind color */
--tile-red-active:var(--k12-gradient-red-active); /* @kind color */
--tile-shelter-in-place:var(--gradient-shelter-in-place); /* @kind color */
--tile-shelter-in-place-hover:var(--k12-gradient-amber-hover); /* @kind color */
--tile-shelter-in-place-active:var(--k12-gradient-amber-active); /* @kind color */
--tile-secure:var(--gradient-secure); /* @kind color */
--tile-secure-hover:linear-gradient(90deg,#488CF0 0%,#47D2F8 100%); /* @kind color */
--tile-secure-active:linear-gradient(90deg,#014EC0 0%,#009DC9 100%); /* @kind color */
--tile-evacuation:var(--gradient-evacuation); /* @kind color */
--tile-evacuation-hover:linear-gradient(90deg,#4AC867 0%,#49DD8D 100%); /* @kind color */
--tile-evacuation-active:linear-gradient(90deg,#039224 0%,#02AB4F 100%); /* @kind color */
--tile-lockdown:var(--gradient-lockdown); /* @kind color */
--tile-lockdown-hover:var(--k12-gradient-red-hover); /* @kind color */
--tile-lockdown-active:var(--k12-gradient-red-active); /* @kind color */
--tile-hold:var(--gradient-hold); /* @kind color */
--tile-hold-hover:var(--k12-gradient-purple-hover); /* @kind color */
--tile-hold-active:var(--k12-gradient-purple-active); /* @kind color */
--tile-purple:var(--k12-gradient-purple); /* @kind color */
--tile-purple-hover:var(--k12-gradient-purple-hover); /* @kind color */
--tile-purple-active:var(--k12-gradient-purple-active); /* @kind color */
}
/* typography.css */
:root{
--font-sans:"Inter","Inter 18pt",system-ui,-apple-system,"Segoe UI",sans-serif;
--font-display:"Inter Display","Inter",system-ui,sans-serif;

/* sizes — taken verbatim from the K12 Safety Web UI Kit type page */
--fs-h1:36px;   --lh-h1:130%; /* @kind font */  --fw-h1:600; /* @kind font */
--fs-h2:24px;   --lh-h2:130%; /* @kind font */  --fw-h2:600; /* @kind font */   /* 500 variant also in kit */
--fs-h3:18px;   --lh-h3:130%; /* @kind font */  --fw-h3:600; /* @kind font */
--fs-h4:14px;   --lh-h4:150%; /* @kind font */  --fw-h4:600; /* @kind font */
--fs-h5:12px;   --lh-h5:150%; /* @kind font */  --fw-h5:600; /* @kind font */

--fs-label-lg:16px; --lh-label-lg:150%; /* @kind font */ --fw-label:500; /* @kind font */  /* radio button */
--fs-label:14px;    --lh-label:150%; /* @kind font */                     /* tabs, inputs, menu, stages */
--fs-label-sm:12px; --lh-label-sm:150%; /* @kind font */                  /* tags, role tags, table titles */

--fs-body:14px;     --lh-body:150%; /* @kind font */  --fw-body:400; /* @kind font */
--fs-body-sm:12px;  --lh-body-sm:150%; /* @kind font */

--fs-button:14px;   --lh-button:150%; /* @kind font */ --fw-button:500; /* @kind font */

--fw-regular:400; /* @kind font */ --fw-medium:500; /* @kind font */ --fw-semibold:600; /* @kind font */ --fw-bold:700; /* @kind font */
}
/* spacing.css */
:root{
/* 4px base; 8px is the workhorse gap (label sits 8px from its control) */
--space-0:0px;
--space-1:4px;
--space-2:8px;
--space-3:12px;
--space-4:16px;
--space-5:20px;
--space-6:24px;
--space-8:32px;
--space-10:40px;
--space-12:48px;
--space-16:64px;

/* control heights from the kit's button/input sizing */
--control-xs:32px;
--control-s:40px;
--control-m:48px;

--page-gutter:24px;
--card-padding:24px;
--sidebar-width:260px;
--header-height:72px;
}
/* radius.css */
:root{
/* radius scale as published on the kit's Radius / Shadow page */
--radius-md:14px;
--radius-lg:16px;
--radius-xl:20px;
--radius-2xl:20px;
--radius-pill:999px;
/* small utility radii used on chips, checkboxes and inputs */
--radius-xs:6px;
--radius-sm:8px;
--radius-input:12px;
}
/* elevation.css */
:root{
--shadow-xs:0 1px 2px rgba(23,23,23,.05);
--shadow-card:0 4px 16px rgba(21,37,86,.06);
--shadow-raised:0 8px 24px rgba(21,37,86,.08);
--shadow-overlay:0 16px 48px rgba(21,37,86,.16);
--shadow-focus:var(--focus-ring);
}
/* motion.css */
:root{
--ease-standard:cubic-bezier(.4,0,.2,1); /* @kind other */
--ease-out:cubic-bezier(0,0,.2,1); /* @kind other */
--dur-fast:120ms; /* @kind other */
--dur-base:180ms; /* @kind other */
--dur-slow:240ms; /* @kind other */
--transition-control:background-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard);
}
/* base.css */
body{font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5{color:var(--text-strong);margin:0}
h1{font-family:var(--font-display);font-size:var(--fs-h1);line-height:var(--lh-h1);font-weight:var(--fw-h1)}
h2{font-size:var(--fs-h2);line-height:var(--lh-h2);font-weight:var(--fw-h2)}
h3{font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:var(--fw-h3)}
h4{font-size:var(--fs-h4);line-height:var(--lh-h4);font-weight:var(--fw-h4)}
h5{font-size:var(--fs-h5);line-height:var(--lh-h5);font-weight:var(--fw-h5)}
a{color:var(--text-link);text-decoration:none}
a:hover{color:var(--text-link-hover);text-decoration:underline}
*{box-sizing:border-box}
input::placeholder,textarea::placeholder{color:var(--k12-gray);opacity:1}
/* Overrides. Each of these removes a whole font face from the legal pages —
 * see the table in landing/README.md before touching them. */
h1 { font-family: var(--font-sans); }
strong { font-weight: var(--fw-semibold); }