/* =============================================================================
   Naizel theme · Warm ivory · Burnt orange · Soft black
   Version 1.0 · 2026-10-22

   How to use
   1. Load the fonts (see README) and this file before any other site CSS.
   2. Style everything with the SEMANTIC tokens (section 2), never the raw hex
      values or the primitive ramps. That way a future colour change is a
      one-file edit.
   3. For a dark section (feature band, footer), add class="nz-inverse".
      The same semantic tokens flip to their dark values inside it, so
      components need no dark-specific CSS.

   Every text/background pairing below meets WCAG 2.2 AA (4.5:1 for text,
   3:1 for borders, focus rings and graphics). See palette.html.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------------
     1. PRIMITIVES — the brand colours and their ramps. Reference only.
     ------------------------------------------------------------------------ */
  --nz-ivory: #F9EBD7;
  --nz-orange: #D5360C;
  --nz-black: #101010;
  --nz-white: #FFFFFF;

  --nz-orange-50: #FCEFEC;
  --nz-orange-100: #F8DFD8;
  --nz-orange-200: #F2BFB1;
  --nz-orange-300: #E99681;
  --nz-orange-400: #DF6646;
  --nz-orange-500: #D5360C;
  --nz-orange-600: #B72E0A;
  --nz-orange-700: #952608;
  --nz-orange-800: #731D06;
  --nz-orange-900: #511505;

  --nz-sand-0: #FFFFFF;
  --nz-sand-50: #FCF6ED;
  --nz-sand-100: #F9EBD7;
  --nz-sand-200: #EBDECB;
  --nz-sand-300: #D8CCBB;
  --nz-sand-400: #AEA597;
  --nz-sand-500: #898277;
  --nz-sand-600: #6D6860;
  --nz-sand-700: #514D48;
  --nz-sand-800: #353330;
  --nz-sand-900: #201F1E;
  --nz-sand-950: #101010;

  /* ---------------------------------------------------------------------------
     2. SEMANTIC TOKENS — use these in components.
     ------------------------------------------------------------------------ */
  /* Backgrounds */
  --nz-bg: var(--nz-ivory);                    /* page background */
  --nz-bg-subtle: var(--nz-sand-200);          /* alternate section, tab strip */
  --nz-surface: var(--nz-sand-50);             /* cards, inputs, menus */
  --nz-overlay: rgba(16, 16, 16, 0.55);        /* modal scrim */

  /* Text */
  --nz-text: var(--nz-black);                  /* body and headings */
  --nz-text-muted: var(--nz-sand-700);         /* secondary text, captions */
  --nz-text-placeholder: var(--nz-sand-600);
  --nz-text-brand: var(--nz-orange-600);       /* eyebrow labels, small orange text */
  --nz-link: var(--nz-orange-600);
  --nz-link-hover: var(--nz-orange-800);

  /* Lines */
  --nz-border: var(--nz-sand-300);             /* hairlines, dividers (decorative) */
  --nz-border-strong: var(--nz-sand-500);      /* input borders, outline controls */

  /* Brand action */
  --nz-primary: var(--nz-orange-500);          /* primary buttons, key highlights */
  --nz-primary-hover: var(--nz-orange-600);
  --nz-primary-active: var(--nz-orange-700);
  --nz-on-primary: var(--nz-white);            /* text/icons on --nz-primary */
  --nz-primary-subtle: var(--nz-orange-100);   /* tinted badges, selected rows */
  --nz-on-primary-subtle: var(--nz-orange-800);

  /* Secondary action (outline / dark button) */
  --nz-secondary: var(--nz-black);
  --nz-on-secondary: var(--nz-ivory);

  /* Focus */
  --nz-focus: var(--nz-orange-600);
  --nz-focus-ring: 0 0 0 3px var(--nz-bg), 0 0 0 5px var(--nz-focus);

  /* Status — deliberately distinct from the orange brand colour.
     Always pair status colour with an icon or word, never colour alone. */
  --nz-success: #1E6B45;
  --nz-success-bg: #DCEFDF;
  --nz-warning: #7A4D00;
  --nz-warning-bg: #F8E3B0;
  --nz-danger: #A11D2B;
  --nz-danger-bg: #F8D9D6;
  --nz-info: #1D5A86;
  --nz-info-bg: #DAE7F2;

  /* ---------------------------------------------------------------------------
     3. TYPOGRAPHY
     ------------------------------------------------------------------------ */
  --nz-font-display: "Sora", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --nz-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --nz-text-xs: 0.75rem;      /* 12 — eyebrow labels, legal */
  --nz-text-sm: 0.875rem;     /* 14 */
  --nz-text-base: 1rem;       /* 16 — body minimum */
  --nz-text-lg: 1.125rem;     /* 18 — lead paragraph */
  --nz-text-xl: 1.25rem;      /* 20 */
  --nz-text-2xl: 1.5rem;      /* 24 — card titles */
  --nz-text-3xl: 1.875rem;    /* 30 */
  --nz-text-4xl: 2.375rem;    /* 38 — section titles (mobile h1) */
  --nz-text-5xl: 2.75rem;     /* 44 — section titles */
  --nz-text-6xl: clamp(2.375rem, 4.6vw, 3.75rem); /* 38–60 — hero h1 */

  --nz-weight-regular: 400;
  --nz-weight-medium: 500;
  --nz-weight-semibold: 600;
  --nz-weight-bold: 700;

  --nz-leading-tight: 1.1;    /* display headings */
  --nz-leading-snug: 1.3;     /* card titles */
  --nz-leading-body: 1.6;     /* paragraphs */

  --nz-tracking-display: -0.025em;
  --nz-tracking-eyebrow: 0.11em;

  /* ---------------------------------------------------------------------------
     4. SPACE, SHAPE, ELEVATION, MOTION
     ------------------------------------------------------------------------ */
  --nz-space-1: 0.25rem;  /* 4 */
  --nz-space-2: 0.5rem;   /* 8 */
  --nz-space-3: 0.75rem;  /* 12 */
  --nz-space-4: 1rem;     /* 16 */
  --nz-space-5: 1.5rem;   /* 24 */
  --nz-space-6: 2rem;     /* 32 */
  --nz-space-7: 3rem;     /* 48 */
  --nz-space-8: 4rem;     /* 64 */
  --nz-space-9: 6rem;     /* 96 — section padding */

  --nz-container: 1240px;
  --nz-gutter: clamp(1rem, 4vw, 2.5rem);

  --nz-radius-sm: 4px;    /* images, tags */
  --nz-radius-md: 8px;    /* inputs in dense UI, menus */
  --nz-radius-lg: 20px;   /* feature panels */
  --nz-radius-pill: 999px;/* buttons, chips */

  --nz-shadow-menu: 0 12px 32px rgba(16, 16, 16, 0.14), 0 2px 6px rgba(16, 16, 16, 0.08);

  --nz-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --nz-duration: 180ms;
}

/* -----------------------------------------------------------------------------
   INVERSE SECTIONS — add class="nz-inverse" to a dark band or footer.
   -------------------------------------------------------------------------- */
.nz-inverse {
  --nz-bg: var(--nz-black);
  --nz-bg-subtle: #232220;
  --nz-surface: #232220;
  --nz-text: var(--nz-ivory);
  --nz-text-muted: #90887D;
  --nz-text-placeholder: #90887D;
  --nz-text-brand: var(--nz-orange-400);
  --nz-link: var(--nz-orange-400);
  --nz-link-hover: var(--nz-orange-300);
  --nz-border: #3F3C38;
  --nz-border-strong: #79736A;
  --nz-secondary: var(--nz-ivory);
  --nz-on-secondary: var(--nz-black);
  --nz-focus: var(--nz-orange-300);
  /* re-declared because custom properties resolve where they are defined */
  --nz-focus-ring: 0 0 0 3px var(--nz-black), 0 0 0 5px var(--nz-orange-300);
  background-color: var(--nz-bg);
  color: var(--nz-text);
}