/* Rubrica design tokens. This is the ONLY file in /app that contains colour values.
   Light theme on :root, dark theme on [data-theme="dark"]. Spec section 2. */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../assets/fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../assets/fonts/inter-latin-700-normal.woff2") format("woff2"); }

:root {
  /* brand palette (Rubrica logo export: Deep Blue #18215C, Mustard #F4B942) */
  --navy-900: #18215C;
  --navy-700: #2E2C7A;
  --navy-50: #EEF0FA;
  --mustard-500: #F4B942;
  --mustard-50: #FEF6E4;
  --crimson-600: #D7336A;
  --crimson-700: #B0194D;
  --crimson-50: #FDECF1;
  --green-500: #5FBF4E;
  --green-600: #3E8E30;
  --green-700: #2F7A22;
  --green-50: #EAF7E6;
  --amber-500: #E0A800;
  --amber-700: #7A5600;
  --amber-50: #FFF6D9;

  /* neutrals. ink-400 is darkened from the spec's #A1A5B7 so muted text passes 4.5:1 (DECISIONS D-05);
     the original value survives as ink-300 for non-text strokes. */
  --ink-900: #1F2233;
  --ink-600: #5E6278;
  --ink-400: #686C82;
  --ink-300: #A1A5B7;
  --line: #EEF0F4;
  --line-strong: #DCDFE7;
  --border-input: #C4C8D4;
  --border-input-hover: #9A9EB1;
  --shadow-input: 0 1px 2px rgba(16, 24, 40, .05);
  --surface: #FFFFFF;
  --canvas: #F7F8FA;
  --field: #F5F6F9;
  --white: #FFFFFF;

  /* roles */
  --primary: var(--navy-900);
  --primary-hover: var(--navy-700);
  --on-primary: var(--white);
  --soft: var(--navy-50);
  --on-soft: var(--navy-900);
  --danger: var(--crimson-600);
  --on-danger: var(--white);
  --success: var(--green-700);
  --on-success: var(--white);
  --link: var(--navy-700);
  --focus: #5B58D6;
  --skeleton: #ECEEF3;
  --shadow: 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-pop: 0 12px 32px rgba(16, 24, 40, .14);
  --scrim: rgba(15, 16, 36, .45);
  --backdrop-dim: rgba(10, 12, 30, .40);
  --watermark: rgba(24, 33, 92, .05);

  /* CBC rubric scale: pastel bg / same-hue text / solid mark */
  --ee-bg: var(--green-50);   --ee-fg: var(--green-700);   --ee: #3B8531;
  --me-bg: var(--navy-50);    --me-fg: var(--navy-900);    --me: #3F3C9E;
  --ae-bg: var(--amber-50);   --ae-fg: var(--amber-700);   --ae: var(--amber-500);
  --be-bg: var(--crimson-50); --be-fg: var(--crimson-700); --be: var(--crimson-600);

  /* text on solid rubric fills (bars, heatmap cells, level chips) */
  --on-ee: #FFFFFF; --on-me: #FFFFFF; --on-ae: #1F2233; --on-be: #FFFFFF;

  /* school crest tones */
  --crest-navy-bg: var(--soft);     --crest-navy-fg: var(--on-soft);
  --crest-crimson-bg: var(--crimson-50); --crest-crimson-fg: var(--crimson-700);
  --crest-green-bg: var(--green-50);   --crest-green-fg: var(--green-700);
  --crest-amber-bg: var(--amber-50);   --crest-amber-fg: var(--amber-700);

  /* type */
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-page: 20px; --fw-page: 600;
  --fs-card: 18px; --fw-card: 600;
  --fs-body: 14px;
  --fs-th: 12px;
  --fs-meta: 13px;
  --fs-stat: 28px;
  --fs-group: 11px;

  /* spacing (4px grid) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;

  /* shape */
  --r-card: 12px; --r-btn: 8px; --r-input: 8px; --r-pill: 6px; --r-modal: 12px; --r-full: 999px;
  --h-btn: 40px; --h-btn-sm: 32px; --h-input: 44px; --h-pill: 24px;

  /* layout */
  --sidebar-w: 264px; --rail-w: 72px; --topbar-h: 72px; --content-max: 1280px; --modal-w: 560px;
}

[data-theme="dark"] {
  --navy-50: #24264F;
  --mustard-50: #332A12;
  --crimson-50: #3A1A2A;
  --crimson-700: #FF8FB2;
  --green-50: #16301A;
  --green-700: #8FDB7F;
  --amber-50: #33290C;
  --amber-700: #F2CC5C;

  --ink-900: #ECEDF5;
  --ink-600: #B7BAD0;
  --ink-400: #9A9DB8;
  --ink-300: #5F6285;
  --line: #25274A;
  --line-strong: #33365E;
  --border-input: #3A3D66;
  --border-input-hover: #5A5E8A;
  --shadow-input: none;
  --surface: #17182F;
  --canvas: #0F1024;
  --field: #1E2040;

  --success: #2F7A22;
  --primary: #5B58D6;
  --primary-hover: #6D6AE6;
  --soft: #24264F;
  --on-soft: #D5D6FA;
  --link: #A9A7F7;
  --focus: #8F8CF5;
  --skeleton: #22244A;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-pop: 0 12px 32px rgba(0, 0, 0, .55);
  --scrim: rgba(0, 0, 0, .6);
  --watermark: rgba(255, 255, 255, .04);

  --me-fg: #C9CAFA; --me: #7D7AE8;
  --ee: #6FCB5E;
  --on-ee: #0F1024; --on-me: #0F1024; --on-ae: #0F1024; --on-be: #FFFFFF;
}

/* Paper: printable sheets (report card, KICD scheme, worksheets) stay white with dark ink in either theme. */
.paper {
  --surface: #FFFFFF; --canvas: #F7F8FA; --field: #F5F6F9; --line: #EEF0F4; --line-strong: #DCDFE7;
  --ink-900: #1F2233; --ink-600: #5E6278; --ink-400: #686C82; --ink-300: #A1A5B7;
  --navy-50: #EEF0FA; --soft: #EEF0FA; --on-soft: #18215C; --primary: #18215C; --link: #2E2C7A;
  --green-50: #EAF7E6; --green-700: #2F7A22; --amber-50: #FFF6D9; --amber-700: #7A5600; --crimson-50: #FDECF1; --crimson-700: #B0194D;
  --ee-bg: #EAF7E6; --ee-fg: #2F7A22; --me-bg: #EEF0FA; --me-fg: #18215C; --ae-bg: #FFF6D9; --ae-fg: #7A5600; --be-bg: #FDECF1; --be-fg: #B0194D;
  --ee: #3B8531; --me: #3F3C9E; --ae: #E0A800; --be: #D7336A;
  --on-ee: #FFFFFF; --on-me: #FFFFFF; --on-ae: #1F2233; --on-be: #FFFFFF;
  background: var(--surface); color: var(--ink-900);
}