/* ================================
   Noble Nonprofit Consulting: design tokens

   The single source of truth for the brand's colour, type, spacing, radii
   and shadows. Components (nb-components.css) and Tailwind utilities (via the
   @theme inline block below) both read from here. Change a value once.

   Palette: warm off-white page, deep green for dark bands and the footer,
   a bright accent for the primary action, coral as the secondary accent.

   Dark scheme: the overrides on html[data-theme="dark"] below. Only pages
   that load js/nb-theme.js get a data-theme (the apps do; the public site
   doesn't), so everything else stays light.
   ================================ */

:root {
  /* ---- Brand ---- */
  --nb-brand: #C5D232;          /* primary action */
  --nb-brand-hover: #B4C125;
  --nb-brand-light: #EEF2CF;
  --nb-coral: #F4A07C;          /* secondary accent */
  --nb-coral-hover: #EE8E65;
  --nb-coral-light: #FCEBE2;

  /* ---- Greens (dark surfaces) ---- */
  --nb-green: #2F4A43;
  --nb-green-deep: #243934;
  --nb-green-light: #DDE6E2;

  /* ---- Roles ----
     Green is a surface (secondary buttons, dark badges, bands) and also the
     accent on the page (links, focus rings, the wordmark's dot, chart
     lines). In the dark scheme those split, so the accent has its own
     token: use --nb-accent for green ink or lines on the page, --nb-green
     for green you put text on. Text on chartreuse or coral stays dark in
     both schemes. */
  --nb-accent: var(--nb-green);
  --nb-text-on-brand: var(--nb-ink);

  /* ---- Text ---- */
  --nb-ink: #1E2B28;            /* headings */
  --nb-text: #3A4845;           /* body */
  --nb-text-light: #5D6B68;
  --nb-text-muted: #7D8986;
  --nb-text-faint: #A5AEAC;
  --nb-text-on-dark: #F5F2EC;
  --nb-text-on-dark-muted: #C3CCC8;

  /* ---- Surfaces ---- */
  --nb-bg-page: #F7F4EE;
  --nb-bg-warm: #F0EBE2;
  --nb-bg-card: #FFFFFF;
  --nb-bg-dark: var(--nb-green);

  /* ---- Borders ---- */
  --nb-line: #E5DFD4;
  --nb-line-strong: #D3CBBE;
  --nb-line-on-dark: #43605A;

  /* ---- Status ---- */
  --nb-success-bg: #E6F3E8; --nb-success-text: #2E7D32;
  --nb-error-bg: #FBE9E7;   --nb-error-text: #B4442F;
  --nb-warning-bg: #FFF6DD; --nb-warning-text: #9A6E00;
  --nb-info-bg: #E6F0F2;    --nb-info-text: #2A6C78;

  /* ---- Typography ---- */
  --nb-font-display: "Lora Variable", Georgia, "Times New Roman", serif;
  --nb-font-body: "Nunito Sans Variable", "Helvetica Neue", Arial, sans-serif;

  --nb-text-xs: 0.8125rem;   /* 13 */
  --nb-text-sm: 0.9375rem;   /* 15 */
  --nb-text-base: 1.0625rem; /* 17 */
  --nb-text-lg: 1.1875rem;   /* 19 */
  --nb-text-xl: 1.375rem;    /* 22 */
  --nb-text-2xl: 1.625rem;   /* 26 */
  --nb-text-3xl: 2rem;       /* 32 */
  --nb-text-4xl: 2.5rem;     /* 40 */
  --nb-text-5xl: 3.25rem;    /* 52 */
  --nb-text-6xl: 4rem;       /* 64 */

  --nb-leading-tight: 1.15;
  --nb-leading-snug: 1.3;
  --nb-leading-normal: 1.65;

  --nb-weight-normal: 400;
  --nb-weight-medium: 500;
  --nb-weight-semibold: 600;
  --nb-weight-bold: 700;

  /* ---- Spacing ---- */
  --nb-space-xs: 0.25rem;
  --nb-space-sm: 0.5rem;
  --nb-space-md: 1rem;
  --nb-space-lg: 1.5rem;
  --nb-space-xl: 2rem;
  --nb-space-2xl: 3rem;
  --nb-space-3xl: 4.5rem;
  --nb-space-4xl: 6rem;
  --nb-space-5xl: 8rem;

  /* ---- Layout ---- */
  --nb-width-narrow: 44rem;    /* 704 */
  --nb-width-standard: 70rem;  /* 1120 */
  --nb-width-wide: 82rem;      /* 1312 */
  --nb-page-padding: 1.5rem;

  /* ---- Radii ---- */
  --nb-radius-sm: 0.375rem;
  --nb-radius-md: 0.625rem;
  --nb-radius-lg: 1rem;
  --nb-radius-xl: 1.5rem;
  --nb-radius-pill: 9999px;

  /* ---- Shadows ---- */
  --nb-shadow-card: 0 1px 2px rgba(30, 43, 40, 0.04), 0 6px 20px rgba(30, 43, 40, 0.05);
  --nb-shadow-card-hover: 0 2px 6px rgba(30, 43, 40, 0.06), 0 12px 32px rgba(30, 43, 40, 0.08);
  --nb-shadow-pop: 0 8px 28px rgba(30, 43, 40, 0.12);

  /* ---- Motion ---- */
  --nb-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --nb-duration: 160ms;
}

/* The dark scheme: Noble's greens, deepened to a page. Set by js/nb-theme.js
   from the person's choice (or their system's). Contrast on the page: body
   text 12:1, muted 6:1, the accent 9.6:1, text on chartreuse 8.8:1. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --nb-brand-light: #30361A;
  --nb-coral-light: #3A2820;

  /* --nb-green and --nb-green-deep stay as they are: surfaces in both
     schemes. The pale green tint deepens. */
  --nb-green-light: #22342F;

  --nb-accent: #A3C9BB;
  --nb-text-on-brand: #1E2B28;

  --nb-ink: #EEF1EC;
  --nb-text: #D2D9D5;
  --nb-text-light: #ABB7B3;
  --nb-text-muted: #8E9A96;
  --nb-text-faint: #65726E;

  --nb-bg-page: #141C1A;
  --nb-bg-warm: #1A2422;
  --nb-bg-card: #1D2826;

  --nb-line: #2C3936;
  --nb-line-strong: #3E4D49;
  --nb-line-on-dark: #4A6760;

  --nb-success-bg: #1C3322; --nb-success-text: #8FD19A;
  --nb-error-bg: #3A2220;   --nb-error-text: #F29B88;
  --nb-warning-bg: #352C13; --nb-warning-text: #E6C26B;
  --nb-info-bg: #1A2F33;    --nb-info-text: #8CC8D3;

  --nb-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.25), 0 6px 20px rgba(0, 0, 0, 0.25);
  --nb-shadow-card-hover: 0 2px 6px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.35);
  --nb-shadow-pop: 0 8px 28px rgba(0, 0, 0, 0.45);
}

/* Tailwind utilities read the same tokens: bg-brand, text-ink, font-display,
   rounded-pill, max-w-standard, shadow-card … */
@theme inline {
  --color-brand: var(--nb-brand);
  --color-brand-hover: var(--nb-brand-hover);
  --color-brand-light: var(--nb-brand-light);
  --color-coral: var(--nb-coral);
  --color-coral-hover: var(--nb-coral-hover);
  --color-coral-light: var(--nb-coral-light);
  --color-green: var(--nb-green);
  --color-green-deep: var(--nb-green-deep);
  --color-green-light: var(--nb-green-light);
  --color-ink: var(--nb-ink);
  --color-text: var(--nb-text);
  --color-text-light: var(--nb-text-light);
  --color-muted: var(--nb-text-muted);
  --color-faint: var(--nb-text-faint);
  --color-on-dark: var(--nb-text-on-dark);
  --color-on-dark-muted: var(--nb-text-on-dark-muted);
  --color-page: var(--nb-bg-page);
  --color-warm: var(--nb-bg-warm);
  --color-card: var(--nb-bg-card);
  --color-line: var(--nb-line);
  --color-line-strong: var(--nb-line-strong);
  --color-line-on-dark: var(--nb-line-on-dark);

  --font-display: var(--nb-font-display);
  --font-body: var(--nb-font-body);

  --radius-sm: var(--nb-radius-sm);
  --radius-md: var(--nb-radius-md);
  --radius-lg: var(--nb-radius-lg);
  --radius-xl: var(--nb-radius-xl);
  --radius-pill: var(--nb-radius-pill);

  --shadow-card: var(--nb-shadow-card);
  --shadow-card-hover: var(--nb-shadow-card-hover);
  --shadow-pop: var(--nb-shadow-pop);

  --container-narrow: var(--nb-width-narrow);
  --container-standard: var(--nb-width-standard);
  --container-wide: var(--nb-width-wide);
}