/* ============================================================================
   GoAgencyOS — Foundations: Color + Type
   Vendored from Claude Design project 2407aa13-b1aa-4d68-bf74-554b4855e570.
   "Editorial-tech OS" — warm ink & paper neutrals, one electric signal accent,
   six muted module hues for the intelligence stack.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Hanken+Grotesk:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap');

:root {
  /* --- Brand neutrals: warm ink → warm paper ----------------------------- */
  --ink-900: #14150E;   /* warmest near-black — primary surface (dark) + text */
  --ink-800: #1D1E15;
  --ink-700: #2A2B20;
  --ink-600: #3C3D30;
  --ink-500: #5A5B49;   /* muted body on paper */
  --ink-400: #7E7F6A;
  --ink-300: #A6A793;
  --ink-200: #CDCBB9;
  --ink-100: #E4E1D2;

  --paper-300: #DEDACB; /* deepest paper / hairline fills */
  --paper-200: #E9E5D7;
  --paper-100: #F1EEE2; /* default light surface */
  --paper-050: #F7F4EB; /* lifted light surface */
  --white:     #FCFBF6; /* warm white — cards on paper */
  --cream:     #F1F1E3; /* THE wordmark cream — "GoAgency" on dark. NEVER use plain white for the wordmark. */

  /* --- Signal: the one loud accent (acid lime "intelligence") -------------
     LIME mirrors the logo: brand mark + "OS", the single primary action per
     surface, the active-module tick, the LIVE beacon — AND positive metrics /
     up-trends, which carry a readable lime (signal-600 on light, signal-400 on
     dark). Never use lime for avatars, tags, or icon tiles. */
  --signal-600: #95C400;
  --signal-500: #B6EF1A; /* primary accent */
  --signal-400: #C9F44D;
  --signal-300: #DBF885;
  --signal-100: #EEFBC2;
  --signal-ink: #1C2400; /* text that sits ON signal */

  /* --- Module hues: 6 intelligence modules, harmonized (oklch ~0.72 L) ---- */
  --mod-keyword:      #B6EF1A; /* Keyword Intelligence — uses signal */
  --mod-production:   #E8A13B; /* Production Intelligence — amber/clay */
  --mod-content:      #E5705B; /* Content Production — warm coral */
  --mod-distribution: #2FB6A6; /* Content Distribution — teal */
  --mod-authority:    #4F7BE8; /* Authority / backlinks — cobalt */
  --mod-performance:  #B566D6; /* Performance Tracking — orchid */

  /* tinted backgrounds for module surfaces (light) */
  --mod-keyword-bg:      #EEFBC2;
  --mod-production-bg:   #FBEFD7;
  --mod-content-bg:      #FBE3DD;
  --mod-distribution-bg: #D6F2EE;
  --mod-authority-bg:    #DEE7FB;
  --mod-performance-bg:  #F0E0F7;

  /* --- Semantic ----------------------------------------------------------- */
  --success: #3E9E5B;   /* positive metrics / up-trends — the data green (NOT lime) */
  --success-bg: #DCF0E2;
  --warning: #D9911F;
  --warning-bg: #FAEBCF;
  --error:   #D6443B;
  --error-bg: #FADEDB;
  --info:    #4F7BE8;
  --info-bg: #DEE7FB;

  /* --- Functional roles (light theme default) ----------------------------- */
  --bg:        var(--paper-100);
  --bg-lifted: var(--white);
  --bg-sunken: var(--paper-200);
  --fg1: var(--ink-900);  /* primary text */
  --fg2: var(--ink-500);  /* secondary text */
  --fg3: var(--ink-400);  /* tertiary / captions */
  --fg-on-dark: var(--paper-100);
  --accent: var(--signal-500);
  --accent-ink: var(--signal-ink);
  --hairline: #00000014;          /* borders on light */
  --hairline-strong: #0000002b;
  --hairline-on-dark: #FFFFFF1F;

  /* --- Type families ------------------------------------------------------ */
  --font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --font-sans: 'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* --- Radii -------------------------------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-pill: 999px;
}