/* ============================================================
   Ajen Brand System — ground.ajen.care internal tools
   Based on Ajen Styleguide (The Phoney Club, 2023)

   Pragmatic adaptation: brand-aligned look & feel for
   data-driven internal tools (not consumer-facing).
   ============================================================ */

/* --- Fonts --- */
@font-face {
  font-family: 'Neue Montreal';
  src: url('fonts/NeueMontreal-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PP Supply Mono';
  src: url('fonts/PPSupplyMono-Ultralight.otf') format('opentype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

/* --- Brand palette --- */
:root {
  /* Core Ajen colors (from Figma styleguide) */
  --ajen-salie:      #DADBC2;  /* sage green — signature */
  --ajen-steen:      #9F9C90;  /* stone gray */
  --ajen-veen:       #40382D;  /* dark peat */
  --ajen-lucht:      #D4E2EC;  /* sky blue */
  --ajen-zand:       #E8E8DE;  /* sand/cream */
  --ajen-mos:        #645C41;  /* moss/olive */
  --ajen-goudsbloem: #E5DE6F;  /* marigold */
  --ajen-black:      #000000;  /* brand black */
  --ajen-white:      #FFFFFF;  /* brand white */

  /* Extended colors — 50% tints */
  --ajen-salie-50:      #ECEDDF;
  --ajen-veen-50:       #A19C95;
  --ajen-zand-50:       #F3F3EE;
  --ajen-goudsbloem-50: #F3EEAC;
  --ajen-steen-50:      #D0CDC7;
  --ajen-lucht-50:      #E7F1F6;
  --ajen-mos-50:        #AE9F9B;

  /* Extended colors — 25% tints */
  --ajen-salie-25:      #F4F5EF;
  --ajen-veen-25:       #CFCCC9;
  --ajen-zand-25:       #F8F8F6;
  --ajen-goudsbloem-25: #F8F5D7;
  --ajen-steen-25:      #E7E5E2;
  --ajen-lucht-25:      #F4F7F9;
  --ajen-mos-25:        #C9C1B9;

  /* Ground tool mapping — brand-derived functional colors */
  --bg:           #FAFBF7;       /* brand surface background (from Figma) */
  --card:         #ffffff;
  --border:       #d8d8ce;       /* Salie-influenced border */
  --text:         #231f20;       /* Ajen logo black */
  --text-muted:   #7a7769;       /* Steen-derived */
  --accent:       #4a5a3a;       /* Botanical green — derived from Mos/Veen */
  --accent-hover: #3a4a2d;       /* Darker botanical */
  --accent-light: #e8ead9;       /* Light sage for hover backgrounds */

  /* Semantic colors — kept functional, softened to fit brand */
  --success:      #4a7a4a;       /* Earthy green */
  --success-bg:   #eef4ec;
  --warn:         #8a7030;       /* Goudsbloem-derived warm */
  --warn-bg:      #f8f5e6;
  --danger:       #9a3a3a;       /* Muted earthy red */
  --danger-bg:    #f8eeee;
  --info:         #4a6a8a;       /* Lucht-derived blue */
  --info-bg:      #ecf1f6;

  /* Status colors (translations, orders) */
  --status-draft:     #8a7030;   /* warm amber/goudsbloem */
  --status-reviewed:  #4a7a4a;   /* earthy green */
  --status-published: #7a7769;   /* steen */
  --status-flagged:   #9a3a3a;   /* muted red */
  --status-new:       #4a6a8a;   /* lucht blue */
  --status-skipped:   #9F9C90;   /* steen */

  /* Typography */
  --font-body: 'Neue Montreal', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'PP Supply Mono', 'SF Mono', 'Fira Code', monospace;

  /* Spacing (4px base) */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 0.75rem;
  --space-lg: 1rem;
  --space-xl: 1.5rem;
  --space-2xl: 2rem;

  /* Radii — slightly softer than current */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 99px;

  /* Shadows — subtle, warm */
  --shadow-sm: 0 1px 3px rgba(64, 56, 45, 0.08);
  --shadow-md: 0 4px 12px rgba(64, 56, 45, 0.1);
  --shadow-lg: 0 8px 24px rgba(64, 56, 45, 0.12);
}

/* --- Base typography --- */
body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Monospace for data: SKUs, quantities, codes */
.mono, code, .sku, [data-sku] {
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

/* --- Logo (inline SVG helper) --- */
.ajen-logo {
  display: inline-block;
  height: 1.2em;
  vertical-align: middle;
}