/* =============================================================================
   BTEC CAMPUS — DESIGN SYSTEM · LAYER 1: TOKENS
   -----------------------------------------------------------------------------
   Register: "tactile bold-minimal".
     · Neo-brutalist STRUCTURE  -> 2px navy borders + hard, zero-blur offset shadows
     · Editorial TYPOGRAPHY     -> oversized display, negative tracking, mixed weight
     · Bento COMPOSITION        -> asymmetric card grid
     · Voltage ACCENTS          -> acid lime / violet / cyan, used sparingly
   Brand: BTEC orange #F37021 (from the official logo) + deep navy #0B142B.

   HARD RULES baked into this file
     1. Canvas is warm off-white #FFFDF7 — never #FFFFFF. Dark canvas is
        navy-cast #070A14 — never #000000.
     2. Orange is a FILL, never body text on white (2.93:1). Orange text uses
        --orange-700 #B0450B (5.67:1). Ink on orange fills is navy (6.31:1).
     3. Volt lime is a dark-surface / fill colour only (1.18:1 on white).
     4. Hard shadows on interactive objects only — never on table rows or
        fields inside a table.
     5. Fluid clamp() type on display headings only — never on controls,
        labels, tabs or table cells.
   ============================================================================= */

:root{
  /* ─────────────────────────── 1. PRIMITIVES ─────────────────────────── */

  /* BTEC orange */
  --orange-50:#FFF4EC;  --orange-100:#FFE4D2; --orange-200:#FFC8A5;
  --orange-300:#FFA974; --orange-400:#FA8B45; --orange-500:#F37021;
  --orange-600:#D95A11; --orange-700:#B0450B; --orange-800:#83330A;
  --orange-900:#5A2308;

  /* Deep navy — ink, borders and every hard shadow */
  --navy-50:#F2F5FA;  --navy-100:#E3E8F2; --navy-200:#C2CCE0; --navy-300:#8D9DC4;
  --navy-400:#5A6FA8; --navy-500:#32498A; --navy-600:#24386E; --navy-700:#18274F;
  --navy-800:#111C3A; --navy-900:#0B142B; --navy-950:#070A14;

  /* Voltage accents */
  --volt-400:#D4FF6B;  --volt-500:#C6FF3D;  --volt-600:#B0EF1C;
  --violet-300:#B79CFF;--violet-500:#7C4DFF;--violet-600:#6636F5;
  --cyan-300:#7BF2FF;  --cyan-500:#00E5FF;  --cyan-600:#00B8CC;
  --pink-500:#FF7AC8;  --coral-500:#FF4D6D;

  /* Semantic ramps */
  --green-50:#E7F6EC;  --green-200:#A7DFB8; --green-500:#12B76A;
  --green-600:#0E9558; --green-700:#0B7A4B;
  --amber-50:#FFF6E0;  --amber-200:#FFDF9E; --amber-500:#FFB703;
  --amber-600:#C98600; --amber-700:#8A5B00;
  --rose-50:#FDECEC;   --rose-200:#F6BEC0;  --rose-500:#E5484D;
  --rose-600:#C92B31;  --rose-700:#A31D22;
  --sky-50:#E4F8FC;    --sky-200:#A8E4F0;   --sky-500:#0AA2C0;
  --sky-600:#087F98;   --sky-700:#065E71;

  /* ─────────────────────────── 2. TYPOGRAPHY ─────────────────────────── */
  --font-display:'Bricolage Grotesque','Plus Jakarta Sans',system-ui,sans-serif;
  --font-ui:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,'JetBrains Mono',Menlo,Consolas,monospace;

  /* fluid — DISPLAY ONLY */
  --t-hero:clamp(2.5rem,1.5rem + 4.4vw,4.5rem);
  --t-d1:clamp(2rem,1.4rem + 2.6vw,3.25rem);
  --t-d2:clamp(1.625rem,1.25rem + 1.6vw,2.25rem);
  --t-kpi:clamp(1.875rem,1.35rem + 2vw,2.75rem);
  /* fixed — everything interactive or dense */
  --t-h2:1.5rem; --t-h3:1.25rem; --t-h4:1.0625rem;
  --t-body:.9375rem;  /* 15px */
  --t-sm:.875rem;     /* 14px */
  --t-xs:.8125rem;    /* 13px */
  --t-label:.6875rem; /* 11px ALL-CAPS eyebrow */

  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-black:800;

  /* ───────────────────────── 3. SPACE / RADIUS ───────────────────────── */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px;--sp-12:48px;--sp-16:64px;

  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:26px; --r-2xl:32px;
  --r-pill:9999px;

  --bw-1:1px; --bw-2:2px; --bw-3:3px;

  /* ───────────────────────── 4. ELEVATION ───────────────────────── */
  /* HARD — the signature. Navy, zero blur. Interactive objects only.        */
  --sh-hard-xs:2px 2px 0 0 var(--rule-hard);
  --sh-hard-sm:3px 3px 0 0 var(--rule-hard);
  --sh-hard:5px 5px 0 0 var(--rule-hard);
  --sh-hard-lg:8px 8px 0 0 var(--rule-hard);
  /* SOFT — data surfaces stay calm.                                        */
  --sh-1:0 1px 2px rgba(11,20,43,.06);
  --sh-2:0 2px 4px rgba(11,20,43,.06),0 8px 24px -10px rgba(11,20,43,.16);
  --sh-3:0 4px 8px rgba(11,20,43,.07),0 20px 48px -16px rgba(11,20,43,.22);
  /* GLOW — reward moments only.                                            */
  --glow-orange:0 0 0 1px rgba(243,112,33,.30),0 10px 34px -10px rgba(243,112,33,.55);
  --glow-volt:0 0 26px rgba(198,255,61,.30),0 0 2px rgba(198,255,61,.85);

  /* ───────────────────────── 5. MOTION ───────────────────────── */
  --dur-instant:90ms; --dur-fast:140ms; --dur:200ms;
  --dur-enter:280ms;  --dur-panel:400ms; --dur-celebrate:700ms;
  --ease-out:cubic-bezier(.25,1,.5,1);
  --ease-emph:cubic-bezier(.2,0,0,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease-spring-xl:cubic-bezier(.68,-.6,.32,1.6);

  /* ───────────────────────── 6. LAYOUT ───────────────────────── */
  --topbar-h:66px; --ticker-h:34px; --sidebar-w:268px;
  --control-h:42px; --control-h-sm:34px; --control-h-lg:52px;
  --row-h:52px;
}

/* ═══════════════════ SEMANTIC — LIGHT ═══════════════════ */
:root,[data-bs-theme="light"]{
  color-scheme:light;

  --canvas:#FFFDF7;                 /* warm off-white: the anti-Bootstrap move */
  --surface:#FFFFFF;
  --surface-2:#F7F8FC;
  --surface-3:#F0F3F9;
  --surface-selected:var(--orange-50);

  --ink:var(--navy-900);
  --ink-muted:#45536F;
  --ink-subtle:#6C7A96;
  --ink-on-accent:var(--navy-900);  /* navy on orange — 6.31:1 */
  --ink-inverse:#FFFDF7;

  --hairline:var(--navy-100);
  --hairline-strong:var(--navy-200);
  --rule-hard:var(--navy-900);      /* borders + hard shadows */
  --border-input:var(--navy-900);

  --brand:var(--orange-500);
  --brand-hover:var(--orange-400);
  --brand-press:var(--orange-600);
  --brand-text:var(--orange-700);   /* orange TEXT / links */
  --brand-subtle:var(--orange-50);
  --brand-border:var(--orange-200);

  --volt:var(--volt-500);
  --violet:var(--violet-500);
  --cyan:var(--cyan-500);

  --success:var(--green-500); --success-subtle:var(--green-50);
  --success-border:var(--green-200); --success-text:var(--green-700);
  --warning:var(--amber-500); --warning-subtle:var(--amber-50);
  --warning-border:var(--amber-200); --warning-text:var(--amber-700);
  --danger:var(--rose-500);   --danger-subtle:var(--rose-50);
  --danger-border:var(--rose-200);   --danger-text:var(--rose-700);
  --info:var(--sky-500);      --info-subtle:var(--sky-50);
  --info-border:var(--sky-200);      --info-text:var(--sky-700);

  --focus-ring:0 0 0 3px rgba(243,112,33,.38),0 0 0 1px var(--orange-600);

  --sidebar-bg:var(--navy-900);
  --sidebar-bg-2:var(--navy-950);
  --sidebar-ink:#D7DEEC;
  --sidebar-ink-muted:#8D9DC4;
  --sidebar-hover:rgba(255,255,255,.07);

  --grain-blend:soft-light; --grain-opacity:.032;

  --chart-1:#F37021; --chart-2:#7C4DFF; --chart-3:#0AA2C0; --chart-4:#12B76A;
  --chart-5:#FFB703; --chart-6:#FF7AC8; --chart-7:#5A6FA8; --chart-8:#B0EF1C;
  --chart-grid:var(--navy-100); --chart-axis:var(--ink-subtle);
}

/* ═══════════════════ SEMANTIC — DARK ═══════════════════ */
/* Depth = a lighter surface, not a heavier shadow. */
[data-bs-theme="dark"]{
  color-scheme:dark;

  --canvas:#070A14;
  --surface:#0D1120;
  --surface-2:#131829;
  --surface-3:#1A2033;
  --surface-selected:#241A10;

  --ink:#F5F7FB;
  --ink-muted:#AEB8CC;
  --ink-subtle:#7A869E;
  --ink-on-accent:var(--navy-900);
  --ink-inverse:var(--navy-900);

  --hairline:rgba(255,255,255,.09);
  --hairline-strong:rgba(255,255,255,.16);
  --rule-hard:#000000;
  --border-input:rgba(255,255,255,.24);

  --brand:#FF8A3D;                  /* lifted one step for dark legibility */
  --brand-hover:#FFA76A;
  --brand-press:var(--orange-500);
  --brand-text:#FFA76A;
  --brand-subtle:#2A1A0E;
  --brand-border:#54401A;

  --success:#3DF39B; --success-subtle:#0C2A1D;
  --success-border:#1E4A34; --success-text:#7BF7BE;
  --warning:#FFC94D; --warning-subtle:#2E2110;
  --warning-border:#4C3819; --warning-text:#FFD98A;
  --danger:#FF6B6E;  --danger-subtle:#2C1416;
  --danger-border:#4E2325;  --danger-text:#FF9EA0;
  --info:#22E6FF;    --info-subtle:#0A2630;
  --info-border:#154350;    --info-text:#7BF2FF;

  --focus-ring:0 0 0 3px rgba(255,138,61,.40),0 0 0 1px var(--brand);

  --sidebar-bg:#0A0D18;
  --sidebar-bg-2:#070A14;
  --sidebar-ink:#AEB8CC;
  --sidebar-ink-muted:#6C7890;
  --sidebar-hover:rgba(255,255,255,.06);

  --sh-1:0 1px 2px rgba(0,0,0,.35);
  --sh-2:0 2px 4px rgba(0,0,0,.4),0 10px 28px -12px rgba(0,0,0,.6);
  --sh-3:0 4px 10px rgba(0,0,0,.45),0 22px 50px -18px rgba(0,0,0,.7);

  --grain-blend:overlay; --grain-opacity:.045;

  --chart-1:#FF8A3D; --chart-2:#B79CFF; --chart-3:#22E6FF; --chart-4:#3DF39B;
  --chart-5:#FFC94D; --chart-6:#FF9ED6; --chart-7:#8D9DC4; --chart-8:#C6FF3D;
  --chart-grid:rgba(255,255,255,.09); --chart-axis:var(--ink-subtle);
}

/* ═══════════════════ BOOTSTRAP 5.3 BRIDGE ═══════════════════ */
:root,[data-bs-theme="light"],[data-bs-theme="dark"]{
  --bs-font-sans-serif:var(--font-ui);
  --bs-font-monospace:var(--font-mono);
  --bs-body-font-size:var(--t-body);
  --bs-body-line-height:1.55;
  --bs-body-bg:var(--canvas);
  --bs-body-color:var(--ink);
  --bs-emphasis-color:var(--ink);
  --bs-secondary-bg:var(--surface-3);
  --bs-secondary-color:var(--ink-muted);
  --bs-tertiary-bg:var(--surface-2);
  --bs-tertiary-color:var(--ink-subtle);
  --bs-heading-color:var(--ink);
  --bs-border-color:var(--hairline);
  --bs-border-color-translucent:var(--hairline);
  --bs-border-radius:var(--r-md);
  --bs-border-radius-sm:var(--r-sm);
  --bs-border-radius-lg:var(--r-lg);
  --bs-border-radius-xl:var(--r-xl);
  --bs-border-radius-pill:var(--r-pill);
  --bs-primary:var(--brand);
  --bs-primary-rgb:243,112,33;
  --bs-primary-bg-subtle:var(--brand-subtle);
  --bs-primary-border-subtle:var(--brand-border);
  --bs-primary-text-emphasis:var(--brand-text);
  --bs-success:var(--success); --bs-success-bg-subtle:var(--success-subtle);
  --bs-success-border-subtle:var(--success-border); --bs-success-text-emphasis:var(--success-text);
  --bs-warning:var(--warning); --bs-warning-bg-subtle:var(--warning-subtle);
  --bs-warning-border-subtle:var(--warning-border); --bs-warning-text-emphasis:var(--warning-text);
  --bs-danger:var(--danger);   --bs-danger-bg-subtle:var(--danger-subtle);
  --bs-danger-border-subtle:var(--danger-border);   --bs-danger-text-emphasis:var(--danger-text);
  --bs-info:var(--info);       --bs-info-bg-subtle:var(--info-subtle);
  --bs-info-border-subtle:var(--info-border);       --bs-info-text-emphasis:var(--info-text);
  --bs-link-color:var(--brand-text);
  --bs-link-hover-color:var(--orange-800);
  --bs-code-color:var(--brand-text);
  --bs-box-shadow-sm:var(--sh-1);
  --bs-box-shadow:var(--sh-2);
  --bs-box-shadow-lg:var(--sh-3);
}

/* ═══════════════════ BASE ═══════════════════ */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
[id]{scroll-margin-top:calc(var(--topbar-h) + 12px);}

body{
  margin:0;
  font-family:var(--font-ui);
  font-size:var(--t-body);
  font-weight:var(--fw-regular);
  line-height:1.55;
  color:var(--ink);
  background:var(--canvas);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

h1,h2,h3,h4,h5,h6{
  font-family:var(--font-display);
  color:var(--ink);
  font-weight:var(--fw-black);
  margin:0 0 var(--sp-2);
  text-wrap:balance;
}
h1{font-size:var(--t-d1);   line-height:1.02; letter-spacing:-.038em;}
h2{font-size:var(--t-d2);   line-height:1.1;  letter-spacing:-.03em;}
h3{font-size:var(--t-h2);   line-height:1.18; letter-spacing:-.024em;}
h4{font-size:var(--t-h3);   line-height:1.25; letter-spacing:-.018em; font-weight:var(--fw-bold);}
h5{font-size:var(--t-h4);   line-height:1.3;  letter-spacing:-.012em; font-weight:var(--fw-bold);}
h6{font-size:var(--t-label);line-height:1.35; letter-spacing:.09em; text-transform:uppercase;
   font-family:var(--font-ui); font-weight:var(--fw-black); color:var(--ink-subtle);}
p{margin:0 0 var(--sp-3); text-wrap:pretty;}

a{color:var(--brand-text);text-decoration:none;transition:color var(--dur-fast) var(--ease-out);}
a:hover{color:var(--orange-800);text-decoration:underline;text-underline-offset:2px;}

code,kbd,samp{font-family:var(--font-mono);font-size:.9em;}
code{color:var(--brand-text);background:var(--surface-3);padding:.1em .35em;border-radius:var(--r-xs);}

hr{border:0;border-top:var(--bw-1) solid var(--hairline);opacity:1;margin:var(--sp-5) 0;}
::selection{background:var(--volt);color:var(--navy-900);}

/* Numerals never jitter; numeric columns compare digit-by-digit. */
.num,.kpi__value,td.num,th.num{font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1;}
td.num,th.num,.text-num{text-align:right;}

.font-display{font-family:var(--font-display);}
.eyebrow{font-size:var(--t-label);font-weight:var(--fw-black);letter-spacing:.09em;
         text-transform:uppercase;color:var(--ink-subtle);}

/* ═══════════════════ FOCUS (WCAG 2.2 · Technique C40) ═══════════════════ */
:focus{outline:none;}
:focus-visible{outline:var(--bw-2) solid var(--brand);outline-offset:2px;border-radius:var(--r-xs);}

/* ═══════════════════ REDUCED MOTION ═══════════════════ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  :focus-visible{outline:var(--bw-2) solid var(--brand) !important;}
}

/* ═══════════════════ SKIP LINK ═══════════════════ */
.skip-link{
  position:absolute;left:var(--sp-4);top:-4rem;z-index:1090;
  padding:.6rem 1rem;border-radius:var(--r-pill);
  background:var(--volt);color:var(--navy-900);font-weight:var(--fw-black);
  border:var(--bw-2) solid var(--navy-900);box-shadow:var(--sh-hard-sm);
  transition:top var(--dur) var(--ease-spring);
}
.skip-link:focus{top:var(--sp-3);color:var(--navy-900);text-decoration:none;}

/* ═══════════════════ GRAIN (tactile texture) ═══════════════════ */
.grain::after{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;
  opacity:var(--grain-opacity);mix-blend-mode:var(--grain-blend);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ═══════════════════ PRINT ═══════════════════ */
@media print{
  .app-sidebar,.app-topbar,.app-ticker,.app-footer,.page-actions,.toolbar,.no-print{display:none !important;}
  body{background:#fff !important;font-size:11pt;}
  .card{border:1px solid #ccc !important;box-shadow:none !important;break-inside:avoid;}
  .grain::after{display:none;}
}