/* ──────────────────────────────────────────────────────────
   tokens.css — Brand Token Layer
   ──────────────────────────────────────────────────────────

   Owns:
     - CSS layer order declaration (all files respect this)
     - @font-face declarations (Montserrat)
     - Canonical brand tokens (--brand-*)
     - Semantic design tokens (--color-*, --space-*, --text-*, --radius-*, --shadow-*)
     - Dark-mode token overrides (html.dark)

   Does NOT own:
     - Structural / component CSS (that lives in app.css / workspace.css)
     - Feature-specific overrides (feature templates)
   ────────────────────────────────────────────────────────── */

/* ── Layer Order ───────────────────────────────────────────

   Declaration order = cascade priority (later beats earlier).
   Unlayered styles beat ALL layered styles, so every rule
   MUST live inside a named layer.

   reset   → box-sizing, normalize
   tokens  → brand identity, design tokens (this file)
   base    → element defaults, structural layout (app.css)
   features → feature-surface overrides (workspace.css, etc.)
   utilities → helper classes (.text-right, .hidden, …)

   ────────────────────────────────────────────────────────── */
@layer reset, tokens, base, features, utilities;


/* ── @font-face — Montserrat ─────────────────────────────── */

@font-face {
  font-family: 'Montserrat';
  src: url('/static/fonts/montserrat-latin-400.woff2?v=2026.04c') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/static/fonts/montserrat-latin-500.woff2?v=2026.04c') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/static/fonts/montserrat-latin-600.woff2?v=2026.04c') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/static/fonts/montserrat-latin-700.woff2?v=2026.04c') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* ── Brand Tokens & Semantic Tokens ─────────────────────── */

@layer tokens {
  :root {
    /* ── Brand palette (source-of-truth — N2CON website) ── */
    --brand-navy:          #0f172a;
    --brand-navy-deep:     #020617;
    --brand-lime:          #d3e109;
    --brand-lime-dim:      #bacc06;
    --brand-primary:       #0f172a;      /* navy — headings, emphasis */
    --brand-primary-light: #1e293b;      /* slate-800 — lighter navy */
    --brand-accent:        #1a56db;
    --brand-accent-hover:  #1545b0;
    --brand-surface:       #ffffff;
    --brand-bg:            #f9f8f6;      /* website paper */

    /* ── Semantic colour tokens ── */
    --color-bg:            var(--brand-bg);
    --color-surface:       var(--brand-surface);
    --color-border:        #d4d4d8;      /* zinc-300 */
    --color-border-light:  #e4e4e7;      /* zinc-200 */
    --color-text:          #27272a;      /* zinc-900 — website body text */
    --color-text-muted:    #52525b;      /* zinc-600 */
    --color-text-light:    #a1a1aa;      /* zinc-400 */
    --color-primary:       var(--brand-primary);
    --color-primary-light: var(--brand-primary-light);
    --color-accent:        var(--brand-accent);
    --color-accent-hover:  var(--brand-accent-hover);
    --color-success:       #0e6b3e;
    --color-success-bg:    #e6f5ec;
    --color-warning:       #8a5000;
    --color-warning-bg:    #fff8e1;
    --color-warning-border:#c97b00;
    --color-danger:        #b42318;
    --color-danger-bg:     #fce8e6;
    --color-info:          #1a56db;
    --color-info-bg:       #edf3ff;
    --color-archive:       #0e7490;
    --color-archive-bg:    #ecfeff;
    --color-cta:           #1a56db;
    --color-cta-hover:     #1545b0;
    --color-cta-text:      #ffffff;
    --color-heading:       #0f172a;      /* navy — matches website */

    /* ── Typography ── */
    --font-body:     'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono:     'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
    --text-xs:       0.6875rem;   /* 11px */
    --text-sm:       0.8125rem;   /* 13px */
    --text-base:     0.875rem;    /* 14px */
    --text-lg:       1rem;        /* 16px */
    --text-xl:       1.125rem;    /* 18px */
    --text-2xl:      1.5rem;      /* 24px */

    /* ── Spacing scale (4 px 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;
    --space-12:      3rem;

    /* ── Borders ── */
    --radius-sm:     3px;
    --radius-md:     5px;
    --radius-lg:     8px;

    /* ── Shadows ── */
    --shadow-sm:     0 1px 2px rgba(0,0,0,0.05);
    --shadow-md:     0 2px 6px rgba(0,0,0,0.07);
    --shadow-lg:     0 4px 12px rgba(0,0,0,0.09);
  }


  /* ── Dark-mode token overrides (N2CON website dark theme) ── */

  html.dark {
    --brand-primary:       #f8fafc;      /* slate-50 — heading text */
    --brand-primary-light: #cbd5e1;      /* slate-300 */
    --brand-accent:        #6ea8fe;
    --brand-accent-hover:  #5a93e8;
    --brand-surface:       #1e293b;      /* slate-800 — website dark surface */
    --brand-bg:            #0f172a;      /* navy — website dark paper */

    --color-bg:            var(--brand-bg);
    --color-surface:       var(--brand-surface);
    --color-border:        #334155;      /* slate-700 */
    --color-border-light:  #1e293b;      /* slate-800 */
    --color-text:          #e2e8f0;      /* slate-200 — website dark body text */
    --color-text-muted:    #94a3b8;      /* slate-400 */
    --color-text-light:    #64748b;      /* slate-500 */
    --color-primary:       var(--brand-primary);
    --color-primary-light: var(--brand-primary-light);
    --color-accent:        var(--brand-accent);
    --color-accent-hover:  var(--brand-accent-hover);
    --color-success:       #3fb950;
    --color-success-bg:    #052e16;
    --color-warning:       #d29922;
    --color-warning-bg:    #1c1917;
    --color-warning-border:#d29922;
    --color-danger:        #f85149;
    --color-danger-bg:     #1f0d0d;
    --color-info:          #6ea8fe;
    --color-info-bg:       #0c1929;
    --color-archive:       #22d3ee;
    --color-archive-bg:    #083344;
    --color-cta:           #d3e109;      /* website lime */
    --color-cta-hover:     #bacc06;      /* website lime-dim */
    --color-cta-text:      #0f172a;      /* navy on lime */
    --color-heading:       #f8fafc;      /* slate-50 — website dark heading */

    --shadow-sm:     0 1px 2px rgba(0,0,0,0.30);
    --shadow-md:     0 2px 6px rgba(0,0,0,0.40);
    --shadow-lg:     0 4px 12px rgba(0,0,0,0.50);
  }
}