/* ================================
   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.
   Light scheme only for now; a dark scheme is a block of overrides on
   [data-theme="dark"] when wanted.
   ================================ */

: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;

  /* ---- 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: "Fraunces 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;
}

/* 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);
}