/* ============================================================
   PRIZM Enterprise — demo token layer
   ------------------------------------------------------------
   Shared :root tokens for the static HTML demos
   (Internship-dashboard.html, Outreach-dashboard.html,
   Outreach-programmes.html).

   Values aligned to the deployed reference at
   https://toaproject.vercel.app/ (Tailwind slate-based palette,
   blue-600 accent). See docs/reference-spec.md for the audit
   that produced these values.
   ============================================================ */

:root {
  /* ── Typography ─────────────────────────────────────────────
     Font stack from the reference html { font-family } */
  --font-sans: system-ui, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Consolas, Monaco, "Liberation Mono", monospace;

  /* Type scale — matches reference .text-{role}-{size} utilities.
     Each variable resolves to "size / line-height" suitable for
     `font: var(--text-headline-lg) var(--font-sans)` shorthand. */
  --text-headline-lg-size: 1.75rem;   /* 28px */
  --text-headline-lg-lh:   2.25rem;   /* 36px */
  --text-headline-md-size: 1.25rem;   /* 20px */
  --text-headline-md-lh:   1.75rem;   /* 28px */
  --text-headline-sm-size: 1.125rem;  /* 18px */
  --text-headline-sm-lh:   1.5rem;    /* 24px */
  --text-body-lg-size:     1rem;      /* 16px */
  --text-body-lg-lh:       1.5rem;    /* 24px */
  --text-body-md-size:     0.875rem;  /* 14px */
  --text-body-md-lh:       1.25rem;   /* 20px */
  --text-body-sm-size:     0.75rem;   /* 12px */
  --text-label-md-size:    0.875rem;  /* 14px */
  --text-label-md-lh:      1.25rem;   /* 20px */
  --text-label-md-tracking: 0.02em;
  --text-label-sm-size:    0.75rem;   /* 12px */
  --text-label-sm-lh:      1rem;      /* 16px */
  --text-caption-bold-size: 0.6875rem;/* 11px */
  --text-caption-bold-lh:  1rem;      /* 16px */

  /* ── Backgrounds (Tailwind slate) ─────────────────────────── */
  --bg-bg:                 #f8fafc;   /* slate-50  */
  --bg-bg-subtle:          #f1f5f9;   /* slate-100 */
  --bg-bg-muted:           #e2e8f0;   /* slate-200 */
  --bg-surface:            #ffffff;
  --bg-surface-elevated:   #ffffff;

  /* ── Borders ──────────────────────────────────────────────── */
  --border-border:         #e2e8f0;   /* slate-200 */
  --border-border-strong:  #cbd5e1;   /* slate-300 */

  /* ── Text ─────────────────────────────────────────────────── */
  --text-fg:               #0f172a;   /* slate-900 */
  --text-fg-muted:         #475569;   /* slate-600 */
  --text-fg-subtle:        #64748b;   /* slate-500 */

  /* ── Accent (Tailwind blue) ───────────────────────────────── */
  --bg-accent:             #2563eb;   /* blue-600 */
  --bg-accent-hover:       #1d4ed8;   /* blue-700 */
  --text-accent:           #2563eb;
  --text-accent-fg:        #ffffff;

  /* ── Status ───────────────────────────────────────────────── */
  --text-danger:           #b91c1c;   /* red-700  */
  --bg-danger:             #fee2e2;   /* red-100  */
  --border-danger:         #fecaca;   /* red-200  — demo-only, ref has no border-danger */
  --text-success:          #15803d;   /* green-700*/
  --bg-success:            #dcfce7;   /* green-100*/
  --border-success:        #bbf7d0;   /* green-200 — demo-only */
  --text-warning:          #b45309;   /* amber-700*/
  --bg-warning:            #fef3c7;   /* amber-100*/
  --border-warning:        #fde68a;   /* amber-200 — demo-only */
  --text-info:             #0369a1;   /* sky-700  */
  --bg-info:               #e0f2fe;   /* sky-100  */
  --border-info:           #bae6fd;   /* sky-200  — demo-only */

  /* ── Chart palette (demo-only) ────────────────────────────── */
  --chart-blue:            #2563eb;   /* aligned to new accent */
  --chart-blue-2:          #60a5fa;   /* blue-400 */
  --chart-teal:            #0d9488;
  --chart-amber:           #f59e0b;
  --chart-violet:          #7c3aed;
  --chart-slate:           #94a3b8;
  --chart-emerald:         #10b981;
  --chart-rose:            #f43f5e;

  /* ── Radii (Tailwind defaults) ────────────────────────────── */
  --radius-sm:             0.125rem;  /* 2px  */
  --radius-md:             0.375rem;  /* 6px  */
  --radius-lg:             0.5rem;    /* 8px  — buttons, inputs */
  --radius-xl:             0.75rem;   /* 12px — cards, panels   */

  /* ── Shadows (Tailwind defaults) ──────────────────────────── */
  --shadow-sm:             0 1px 2px 0 rgba(0,0,0,.05);
  --shadow-md:             0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
  --shadow-lg:             0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
  --shadow-xl:             0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1);
}

/* ============================================================
   Typography utility classes
   Use these in HTML wherever the reference uses
   .text-{role}-{size}. Keeps demo markup readable.
   ============================================================ */

.text-headline-lg { font-size: var(--text-headline-lg-size); line-height: var(--text-headline-lg-lh); font-weight: 700; }
.text-headline-md { font-size: var(--text-headline-md-size); line-height: var(--text-headline-md-lh); font-weight: 600; }
.text-headline-sm { font-size: var(--text-headline-sm-size); line-height: var(--text-headline-sm-lh); font-weight: 600; }
.text-body-lg     { font-size: var(--text-body-lg-size);     line-height: var(--text-body-lg-lh);     font-weight: 400; }
.text-body-md     { font-size: var(--text-body-md-size);     line-height: var(--text-body-md-lh);     font-weight: 400; }
.text-body-sm     { font-size: var(--text-body-sm-size);                                              font-weight: 400; }
.text-label-md    { font-size: var(--text-label-md-size);    line-height: var(--text-label-md-lh);    font-weight: 600; letter-spacing: var(--text-label-md-tracking); }
.text-label-sm    { font-size: var(--text-label-sm-size);    line-height: var(--text-label-sm-lh);    font-weight: 500; }
.text-caption-bold{ font-size: var(--text-caption-bold-size);line-height: var(--text-caption-bold-lh);font-weight: 700; }