/*
 * EduFund design tokens -- every colour, size, radius and shadow in the app.
 * Components reference these variables; no other stylesheet hard-codes a
 * colour. Change the brand here and the whole app follows.
 */
:root {
  /* Brand: deep teal = trust / money handled carefully; amber = accent. */
  --color-primary: #0f5e57;
  --color-primary-hover: #0b4a44;
  --color-primary-soft: #e3f1ef;
  --color-primary-contrast: #ffffff;
  --color-secondary: #b7791f;
  --color-secondary-soft: #fbf1e0;

  /* Classical accents: laurel gold and marble ivory (logo, loader, key border) */
  --color-gold: #d9b25f;
  --color-gold-deep: #a9832f;
  --color-gold-text: #8c6c27;    /* gold for TEXT on light backgrounds: 4.9:1 on white (BUG-054) */
  --color-ivory: #f4ecd8;

  /* Robot loader */
  --robot-metal-light: #f7f3ea;
  --robot-metal: #dcd6c8;
  --robot-metal-dark: #6b7a77;
  --robot-outline: #0d3b37;
  --robot-eye: #0d3b37;
  --robot-paper: #fffaf0;
  --robot-cover: #a9832f;

  /* Surfaces and text */
  --color-bg: #f4f6f5;
  --color-surface: #ffffff;
  --color-surface-alt: #f8faf9;
  --color-sidebar: #0d2f2c;
  --color-sidebar-text: #c9dcd9;
  --color-sidebar-active: #173f3b;
  --color-text: #1b2826;
  --color-text-muted: #5c6b69;
  --color-text-faint: #687372;   /* 4.5:1 on white and the grey page; was #8a9896 (3.0:1). (BUG-054) */
  --color-border: #dfe6e4;
  --color-border-strong: #c5d0ce;

  /* Sign-in card (staff login + applicant portal) */
  --signin-ink: #151717;
  --signin-ink-hover: #252727;
  --signin-line: #ecedec;
  /* Teal layer over the sign-in photo: dark behind the heading, lighter towards the card. */
  --login-overlay: linear-gradient(90deg, rgba(8, 38, 35, 0.94) 0%, rgba(8, 38, 35, 0.8) 42%, rgba(8, 38, 35, 0.35) 100%);
  --hero-overlay: radial-gradient(ellipse at 50% 45%, rgba(8, 38, 35, 0.72) 0%, rgba(8, 38, 35, 0.5) 60%, rgba(8, 38, 35, 0.62) 100%);
  --hero-overlay-narrow: linear-gradient(180deg, rgba(8, 38, 35, 0.7) 0%, rgba(8, 38, 35, 0.78) 100%);
  --login-overlay-narrow: linear-gradient(180deg, rgba(8, 38, 35, 0.9) 0%, rgba(8, 38, 35, 0.72) 100%);

  /* shadcn/ui-style cards and tabs on the dashboard (components/ui.js) */
  --ui-fg: hsl(0 0% 3.9%);
  --ui-muted: hsl(150 7% 89%);   /* shadcn's muted, a shade darker so the tab list shows on the grey page */
  --ui-muted-fg: #656565;   /* shadcn muted-foreground, darkened to pass 4.5:1 on the tab list too (BUG-054) */
  --ui-border: hsl(0 0% 90%);
  --ui-radius: 8px;
  --ui-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  /* BorderBeam colours: laurel gold to EduFund teal (the original is orange to purple) */
  --beam-from: #d9b25f;
  --beam-to: #0f5e57;

  /* The three parts of an award ("What sponsorship covers" on the landing page) */
  --part-tuition: #0f5e57;
  --part-accommodation: #b7791f;
  --part-other: #3a9d8f;

  /* Public page loader: soft grey grooves and balls (css/public.css) */
  --pl-bg: #e0e0e0;
  --pl-edge: #e2e2e2;
  --pl-shade: #d3d2d2ab;
  --pl-light: #e9e9e9ab;
  --pl-ball: #e8e8e8;

  /* Dashboard name reveal (components/namereveal.js) */
  --reveal-bg: #b5faff31;
  --reveal-ink: #283a3b;
  --reveal-line: #00000015;
  --reveal-point: #ffffff;
  --reveal-shine: #3f87a6;
  --reveal-speed: 1s;

  /* Document upload tile (apply + status pages) */
  --upload-bg: #dddddd;
  --upload-ink: #525252;
  --upload-ink-hover: #0e0e0e;
  --upload-shadow: rgba(0, 0, 0, 0.72);

  /* Status */
  --color-success: #1f7a4d;
  --color-success-soft: #e3f4ea;
  --color-warning: #9a6200;
  --color-warning-soft: #fdf2dc;
  --color-error: #b3261e;
  --color-error-soft: #fbe7e5;
  --color-info: #245f9e;
  --color-info-soft: #e5eef8;
  --color-neutral-soft: #eceff0;

  /* Chart series (colour-blind friendly order) */
  --chart-1: #0f5e57;
  --chart-2: #d08c1a;
  --chart-3: #3b7dc4;
  --chart-4: #8c5bb5;
  --chart-5: #c2504a;
  --chart-6: #6b8e23;
  --chart-grid: #e7ecea;

  /* Type */
  --font-sans: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", Consolas, monospace;
  /* Classical serif for the wordmark and page titles -- fonts that ship with
     Windows and macOS, so nothing is downloaded. */
  --font-display: "Palatino Linotype", "Book Antiqua", Palatino, "URW Palladio L", Georgia, serif;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-md: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 1.875rem;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --leading: 1.5;

  /* Spacing scale (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;

  /* Shape and depth */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(16, 40, 37, 0.06);
  --shadow: 0 1px 3px rgba(16, 40, 37, 0.08), 0 4px 12px rgba(16, 40, 37, 0.05);
  --shadow-lg: 0 12px 32px rgba(16, 40, 37, 0.18);
  --focus-ring: 0 0 0 3px rgba(15, 94, 87, 0.35);

  /* Layout */
  --sidebar-width: 248px;
  --topbar-height: 60px;
  --content-max: 1280px;
  --transition: 150ms ease;

}