/* =================================================================
   css/tokens.css — THE brand source for every site in the family
   (ibmathrevision.com, alevelmathrevision.com, IGCSE, CBSE).

   One font, one primary colour, grey secondaries, colour reserved for
   data (RAG) and difficulty. The palette is the IB one from ibmath.css
   (primary #0d3d8f, dark #062559, accent #5ec8ff, Inter); ibmath.css's
   older --color-* variables are now aliases of these tokens.

   Do NOT add per-site colour or font overrides here or in a site's own
   CSS: every site loads this same file (IB: via /ibmath.css or
   /css/unit-ux.css; other sites: <link rel="stylesheet"
   href="/css/tokens.css"> or an @import of it) so they look like one
   product family.

   Rules for this file:
     * :root custom properties only, plus classes prefixed `ibm-`.
     * NO element selectors (body, h1, button…) — this file is loaded on
       pages with their own layout, so it must be purely additive.
   ================================================================= */
:root {
  /* Type */
  --ibm-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ibm-text-xs: 0.78rem;   /* 12.5px */
  --ibm-text-sm: 0.875rem;  /* 14px   */
  --ibm-text-md: 1rem;      /* 16px   */
  --ibm-text-lg: 1.25rem;   /* 20px   */
  --ibm-text-xl: 1.5rem;    /* 24px   */
  --ibm-text-2xl: 2rem;     /* 32px   */

  /* Brand */
  --ibm-primary: #0d3d8f;
  --ibm-primary-hover: #062559;
  --ibm-primary-soft: #e8eef9;
  --ibm-dark: #062559;
  --ibm-accent: #5ec8ff;          /* highlight on dark surfaces only */
  --ibm-accent-hover: #3ab0f0;

  /* Neutrals (grey secondaries) */
  --ibm-ink: #0f1f3d;
  --ibm-ink-2: #3a4a68;
  --ibm-muted: #6b7a99;
  --ibm-line: #dfe6f1;
  --ibm-line-strong: #c5d1e4;
  --ibm-surface: #ffffff;
  --ibm-surface-2: #f5f7fb;
  --ibm-bg: #f5f7fb;

  /* Data: RAG */
  --ibm-red: #c62828;    --ibm-red-soft: #fdecec;
  --ibm-amber: #b45309;  --ibm-amber-soft: #fff4e0;
  --ibm-green: #1b7a45;  --ibm-green-soft: #e6f5ec;

  /* Data: difficulty (Easy / Medium / Hard / Exam+) */
  --ibm-diff-easy: #1b7a45;   --ibm-diff-easy-soft: #e6f5ec;
  --ibm-diff-medium: #1f5fbf; --ibm-diff-medium-soft: #e7effb;
  --ibm-diff-hard: #b45309;   --ibm-diff-hard-soft: #fff4e0;
  --ibm-diff-exam: #b4235a;   --ibm-diff-exam-soft: #fcebf2;

  /* Spacing (4px grid) */
  --ibm-s1: 4px; --ibm-s2: 8px; --ibm-s3: 12px; --ibm-s4: 16px;
  --ibm-s5: 20px; --ibm-s6: 24px; --ibm-s8: 32px; --ibm-s12: 48px;

  /* Radii */
  --ibm-r: 8px;        /* controls */
  --ibm-r-card: 12px;  /* cards, tiles */
  --ibm-r-pill: 999px; /* chips */

  /* One shadow (plus a hover lift) */
  --ibm-shadow: 0 1px 2px rgba(6,37,89,0.06), 0 2px 8px rgba(6,37,89,0.05);
  --ibm-shadow-lift: 0 4px 16px rgba(6,37,89,0.12);

  --ibm-focus: 0 0 0 3px rgba(13,61,143,0.28);
}

/* ---------- Buttons ---------- */
.ibm-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; padding: 8px 16px; border-radius: var(--ibm-r);
  font: 600 var(--ibm-text-sm)/1.2 var(--ibm-font); letter-spacing: 0;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  border: 1px solid transparent; background: var(--ibm-surface); color: var(--ibm-primary);
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.ibm-button:focus-visible { outline: none; box-shadow: var(--ibm-focus); }
.ibm-button:disabled { opacity: .5; cursor: not-allowed; }
.ibm-button--primary { background: var(--ibm-primary); color: #fff; }
.ibm-button--primary:hover { background: var(--ibm-primary-hover); color: #fff; }
.ibm-button--secondary { background: var(--ibm-surface); color: var(--ibm-primary); border-color: var(--ibm-line-strong); }
.ibm-button--secondary:hover { border-color: var(--ibm-primary); background: var(--ibm-primary-soft); }
.ibm-button--ghost { background: transparent; color: var(--ibm-primary); }
.ibm-button--ghost:hover { background: var(--ibm-primary-soft); }
.ibm-button--danger { background: var(--ibm-surface); color: var(--ibm-red); border-color: #efb4b4; }
.ibm-button--danger:hover { background: var(--ibm-red-soft); }
.ibm-button--sm { min-height: 32px; padding: 5px 12px; font-size: var(--ibm-text-xs); }
.ibm-button--block { width: 100%; }

/* ---------- Chips (filters, difficulty, status) ---------- */
.ibm-chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 32px; padding: 4px 12px; border-radius: var(--ibm-r-pill);
  font: 600 var(--ibm-text-xs)/1.2 var(--ibm-font);
  border: 1px solid var(--ibm-line-strong); background: var(--ibm-surface); color: var(--ibm-ink-2);
  cursor: default; white-space: nowrap;
}
button.ibm-chip { cursor: pointer; }
button.ibm-chip:hover { border-color: var(--ibm-primary); color: var(--ibm-primary); }
.ibm-chip[aria-pressed="true"], .ibm-chip.is-on { background: var(--ibm-primary); border-color: var(--ibm-primary); color: #fff; }
.ibm-chip .ibm-chip__n { font-weight: 500; opacity: .75; }
.ibm-chip--easy   { color: var(--ibm-diff-easy);   background: var(--ibm-diff-easy-soft);   border-color: transparent; }
.ibm-chip--medium { color: var(--ibm-diff-medium); background: var(--ibm-diff-medium-soft); border-color: transparent; }
.ibm-chip--hard   { color: var(--ibm-diff-hard);   background: var(--ibm-diff-hard-soft);   border-color: transparent; }
.ibm-chip--exam   { color: var(--ibm-diff-exam);   background: var(--ibm-diff-exam-soft);   border-color: transparent; }
.ibm-chip--quiet  { color: var(--ibm-muted); background: var(--ibm-surface-2); border-color: transparent; }

/* ---------- Cards ---------- */
.ibm-panel {
  background: var(--ibm-surface); border: 1px solid var(--ibm-line);
  border-radius: var(--ibm-r-card); box-shadow: var(--ibm-shadow);
  padding: var(--ibm-s5);
}

/* ---------- Tiles (dashboard / course / tool entry points) ---------- */
.ibm-tiles { display: grid; gap: var(--ibm-s4); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.ibm-tile {
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
  background: var(--ibm-surface); border: 1px solid var(--ibm-line);
  border-radius: var(--ibm-r-card); box-shadow: var(--ibm-shadow);
  padding: var(--ibm-s4) var(--ibm-s5); color: var(--ibm-ink); text-decoration: none;
  font-family: var(--ibm-font);
  transition: box-shadow .12s ease, border-color .12s ease, transform .12s ease;
}
a.ibm-tile:hover, button.ibm-tile:hover { border-color: var(--ibm-line-strong); box-shadow: var(--ibm-shadow-lift); transform: translateY(-1px); }
.ibm-tile__eyebrow { font-size: var(--ibm-text-xs); font-weight: 700; color: var(--ibm-muted); text-transform: uppercase; letter-spacing: .06em; }
.ibm-tile__title { font-size: var(--ibm-text-md); font-weight: 700; color: var(--ibm-dark); line-height: 1.3; }
.ibm-tile__sub { font-size: var(--ibm-text-sm); color: var(--ibm-ink-2); line-height: 1.45; }
.ibm-tile__cta { margin-top: auto; padding-top: 6px; font-size: var(--ibm-text-sm); font-weight: 700; color: var(--ibm-primary); }
.ibm-tile--primary { background: var(--ibm-primary); border-color: var(--ibm-primary); }
.ibm-tile--primary .ibm-tile__eyebrow, .ibm-tile--primary .ibm-tile__sub { color: #d5e1f7; }
.ibm-tile--primary .ibm-tile__title, .ibm-tile--primary .ibm-tile__cta { color: #fff; }
.ibm-tile--compact { padding: var(--ibm-s3) var(--ibm-s4); flex-direction: row; align-items: center; gap: var(--ibm-s3); }

/* ---------- Progress bar ---------- */
.ibm-progress { display: flex; align-items: center; gap: 10px; font: 500 var(--ibm-text-xs)/1.2 var(--ibm-font); color: var(--ibm-muted); }
.ibm-progress__track { display: block; flex: 1; height: 8px; border-radius: var(--ibm-r-pill); background: #e9eef6; overflow: hidden; min-width: 60px; }
.ibm-progress__fill { display: block; height: 100%; border-radius: inherit; background: var(--ibm-primary); width: 0; transition: width .3s ease; }
.ibm-progress__fill--red { background: var(--ibm-red); }
.ibm-progress__fill--amber { background: #d97706; }
.ibm-progress__fill--green { background: var(--ibm-green); }

/* ---------- Section heading ---------- */
.ibm-section-title { font: 700 var(--ibm-text-lg)/1.3 var(--ibm-font); color: var(--ibm-dark); margin: 0 0 var(--ibm-s3); letter-spacing: -0.01em; }
.ibm-section-title small { font-size: var(--ibm-text-sm); font-weight: 500; color: var(--ibm-muted); margin-left: 8px; }

/* ---------- Breadcrumb ---------- */
.ibm-crumbs { font: 500 var(--ibm-text-sm)/1.4 var(--ibm-font); color: var(--ibm-muted); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ibm-crumbs a { color: var(--ibm-primary); text-decoration: none; font-weight: 600; }
.ibm-crumbs a:hover { text-decoration: underline; }
.ibm-crumbs .sep { color: var(--ibm-line-strong); }

.ibm-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }