/* ==========================================================================
   AGIM STUDIO — OFFICIAL DESIGN TOKENS & UNIFIED UI LANGUAGE (v3.0 — LOCKED A3)
   Canonical Domain: https://agimstudio.com
   Overarching Brand: A3 Smooth Negative-Space Green Thumb (#16382C Nordic Pine)
   Primary Font: 'Plus Jakarta Sans' + 'JetBrains Mono' + 'Fraunces'
   Skins:
     1. [data-skin="limestone-light"] / [data-skin="heritage"] / [data-skin="cream"]
     2. [data-skin="pine-dark"] / [data-skin="night"] (Calibrated Lighter Nordic Pine Dark)
     3. [data-skin="sage-dusk"] / [data-skin="tactical"] (Even Lighter Botanical Sage-Pine Dusk)
   Registers:
     - [data-register="pro"] (01A Professional: A3 Green Thumb + 1.5px architectural border)
     - [data-register="cartoon"] (01B Cartoon/Originals: Original AGIM Badge + 2.5px #111111 ink + 4px shadow)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=JetBrains+Mono:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root,
html[data-skin="heritage"],
html[data-skin="cream"],
html[data-skin="limestone-light"] {
  /* Canonical v3.0 Surface Tokens (Warm Limestone Light — Locked A/B Winner) */
  --bg-canvas: #F4F1EA !important;
  --bg-card: #FAF8F3 !important;
  --bg-well: #EFECE4 !important;
  --bg-primary: #F4F1EA !important;
  --bg-elevated: #FAF8F3 !important;
  --bg-subtle: #EFECE4 !important;
  --bg: #F4F1EA !important;
  --card-bg: #FAF8F3 !important;
  --card-hover: #FFFFFF !important;
  --bg-glass: rgba(250, 248, 243, 0.92) !important;

  /* Canonical v3.0 Text & Ink Tokens (Nordic Pine #16382C) */
  --ink-primary: #16382C !important;
  --ink-body: #1E2924 !important;
  --ink-muted: #5A6861 !important;
  --text-primary: #16382C !important;
  --text-secondary: #1E2924 !important;
  --text-muted: #5A6861 !important;
  --text: #16382C !important;
  --text-subtle: #4A5A52 !important;

  /* Overarching Brand & 8-App Semantic Accent Tokens */
  --accent-primary: #16382C !important;
  --accent-secondary: #2E7D32 !important;
  --accent-hero-green: #2E7D32 !important;
  --forest: #16382C !important;
  --forest-light: #2E7D32 !important;
  --accent-green: #166534 !important;
  --green: #166534 !important;
  --accent-studio: #2E7D32;
  --accent-boundary: #D97706;
  --accent-helm: #0284C7;
  --accent-roster: #059669;
  --accent-learn: #D96B43;
  --accent-mind: #4F46E5;
  --accent-cadence: #E11D48;
  --accent-radar: #10B981;

  /* Typography & Double-Bezel Boundary Card Geometry */
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-serif: 'Fraunces', Georgia, serif;
  --card-radius-outer: 14px;
  --card-radius-well: 10px;
  --border-width: 1.5px;
  --border-color: #CFC8B8 !important;
  --border-strong: #16382C !important;
  --border: #CFC8B8 !important;
  --card-border: #CFC8B8 !important;
  --card-border-strong: #16382C !important;
  --badge-bg: rgba(22, 56, 44, 0.08) !important;
  --badge-text: #16382C !important;
  --code-bg: #162820 !important;
  --code-text: #F4F1EA !important;
  --card-shadow: 0 2px 8px rgba(22, 56, 44, 0.06) !important;
  --bg-glow: radial-gradient(circle at 50% 0%, rgba(22, 56, 44, 0.06) 0%, transparent 60%) !important;
  color-scheme: light;
  accent-color: #2E7D32;
  scrollbar-color: #5A6861 #EFECE4;
}

/* Calibrated Lighter Nordic Pine Dark Mode (Zero Black Crush — #162820 / #1E352B) */
html[data-skin="night"],
html[data-skin="pine-dark"],
html[data-v3-skin="pine-dark"],
html[data-agim-skin="pine-dark"] {
  --bg-canvas: #162820 !important;
  --bg-card: #1E352B !important;
  --bg-well: #13231C !important;
  --bg-primary: #162820 !important;
  --bg-elevated: #1E352B !important;
  --bg-subtle: #13231C !important;
  --bg: #162820 !important;
  --card-bg: #1E352B !important;
  --card-hover: #243F33 !important;
  --bg-glass: rgba(30, 53, 43, 0.92) !important;

  --ink-primary: #F4F1EA !important;
  --ink-body: #E8E4DA !important;
  --ink-muted: #A8BDB2 !important;
  --text-primary: #F4F1EA !important;
  --text-secondary: #E8E4DA !important;
  --text-muted: #A8BDB2 !important;
  --text: #F4F1EA !important;
  --text-subtle: #8FA69A !important;

  --accent-primary: #34D399 !important;
  --accent-secondary: #F4F1EA !important;
  --accent-hero-green: #34D399 !important;
  --forest: #2E7D32 !important;
  --forest-light: #34D399 !important;
  --accent-green: #34D399 !important;
  --green: #34D399 !important;

  --border-color: #325243 !important;
  --border-strong: #52826B !important;
  --border: #325243 !important;
  --card-border: #325243 !important;
  --card-border-strong: #52826B !important;
  --badge-bg: rgba(52, 211, 153, 0.14) !important;
  --badge-text: #6EE7B7 !important;
  --code-bg: #111F19 !important;
  --code-text: #F4F1EA !important;
  --card-shadow: 0 4px 16px rgba(8, 16, 12, 0.28) !important;
  --bg-glow: radial-gradient(circle at 50% 0%, rgba(52, 211, 153, 0.10) 0%, transparent 60%) !important;
  color-scheme: dark;
  accent-color: #34D399;
  scrollbar-color: #6EE7B7 #13231C;
}

/* Even Lighter Botanical Sage-Pine Dusk Option (#1F362C / #274236) */
html[data-skin="tactical"],
html[data-skin="sage-dusk"],
html[data-v3-skin="sage-dusk"],
html[data-agim-skin="sage-dusk"] {
  --bg-canvas: #1F362C !important;
  --bg-card: #274236 !important;
  --bg-subtle: #1A2E25 !important;
  --bg-well: #1A2E25 !important;
  --bg-primary: #1F362C !important;
  --bg-elevated: #274236 !important;
  --bg: #1F362C !important;
  --card-bg: #274236 !important;
  --card-hover: #2E4D3F !important;
  --bg-glass: rgba(39, 66, 54, 0.92) !important;

  --ink-primary: #F4F1EA !important;
  --ink-body: #EDEAE2 !important;
  --ink-muted: #B6C9BF !important;
  --text-primary: #F4F1EA !important;
  --text-secondary: #EDEAE2 !important;
  --text-muted: #B6C9BF !important;
  --text: #F4F1EA !important;
  --text-subtle: #9EB5A9 !important;

  --accent-primary: #34D399 !important;
  --accent-secondary: #F4F1EA !important;
  --accent-hero-green: #34D399 !important;
  --forest: #2E7D32 !important;
  --forest-light: #34D399 !important;
  --accent-green: #34D399 !important;
  --green: #34D399 !important;

  --border-color: #3E6352 !important;
  --border-strong: #63967E !important;
  --border: #3E6352 !important;
  --card-border: #3E6352 !important;
  --card-border-strong: #63967E !important;
  --badge-bg: rgba(52, 211, 153, 0.16) !important;
  --badge-text: #A7F3D0 !important;
  --code-bg: #162820 !important;
  --code-text: #F4F1EA !important;
  --card-shadow: 0 4px 14px rgba(10, 20, 15, 0.22) !important;
  --bg-glow: radial-gradient(circle at 50% 0%, rgba(52, 211, 153, 0.12) 0%, transparent 60%) !important;
  color-scheme: dark;
  accent-color: #34D399;
  scrollbar-color: #86EFAC #1A2E25;
}

::selection {
  background-color: rgba(46, 125, 50, 0.24);
  color: var(--ink-primary, #16382C);
}

:is(html[data-skin="night"], html[data-skin="pine-dark"], html[data-skin="tactical"], html[data-skin="sage-dusk"], html[data-v3-skin="pine-dark"], html[data-v3-skin="sage-dusk"], html[data-agim-skin="pine-dark"], html[data-agim-skin="sage-dusk"]) ::selection {
  background-color: rgba(52, 211, 153, 0.32);
  color: #F4F1EA;
}

/* ==========================================================================
   CORE CHARACTER & 8-CHAPTER COLOUR STORY CONSTANTS
   ========================================================================== */
:root {
  --agim-nordic-pine: #16382C;
  --agim-limestone: #F4F1EA;
  --agim-pine-dark-canvas: #162820;
  --agim-pine-dark-card: #1E352B;
  --agim-hoodie-green: #2E7D32;
  --agim-print-green: #2E6F40;
  --agim-sunshine-yellow: #FFD93B;
  --agim-sky-blue: #3CB4E5;
  --agim-slate-ink: #111111;
  --agim-warm-cream: #FBFBF6;

  --wife-honey-blonde: #D89B56;
  --wife-champagne-frames: #C4A992;
  --wife-hazel-eyes: #6E8268;
  --wife-charcoal-tee: #232528;

  /* ==========================================================================
     v3.1 STRUCTURAL LAYOUT, 8PT SPATIAL RHYTHM & FLUID SIZING TOKENS
     ========================================================================== */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */

  --nav-height: 56px;
  --dev-bar-height: 34px;
  --shell-max-width: 1360px;
  --shell-pad-inline: clamp(1rem, 3vw, 2rem);
  --shell-pad-block: clamp(1.25rem, 2.5vw, 2.25rem);
  --measure-prose: 65ch;
  --measure-narrow: 48ch;

  /* Fluid Responsive Typography Tokens (clamp viewport + rem) */
  --text-xs: clamp(0.75rem, 0.72rem + 0.12vw, 0.8125rem);
  --text-sm: clamp(0.8125rem, 0.78rem + 0.16vw, 0.875rem);
  --text-base: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
  --text-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.2rem);
  --text-xl: clamp(1.25rem, 1.12rem + 0.6vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.25rem + 1.1vw, 2.125rem);

  /* ==========================================================================
     v4.0 OPTION C DUAL-REGISTER & 3-TIER ROLE-BASED COLOR HIERARCHY TOKENS
     (SPECTACLE-SAFE / ANTI-CHROMOSTEREOPSIS / ANTI-HALATION CALIBRATION)
     - Calibrated to the 7.0:1–9.5:1 Optical Comfort Band (eliminates >14:1 astigmatic glare)
     - Iso-luminant mineral & botanical tones eliminate Longitudinal Chromatic Aberration (LCA)
       for glasses wearers when viewing Core, Child, and Specialist windows side-by-side.
     - Tier 1 (Core Sovereign Apps): Muted Botanical Sage-Pine (#24523E / #16382C)
     - Tier 2 (Child / Dependency Apps): Warm Honey-Ochre (#9A5B13) + Oat-Sandstone Plinth (#F2EEE5)
     - Tier 3 (Specialist / Diagnostic Tools): Muted Terracotta Clay (#A84432) + Rose-Limestone (#F4ECE9)
     ========================================================================== */
  --ink-optical-comfort: #22302A; /* Soft Charcoal-Pine (~8.8:1 on #F4F1EA, zero black halation) */
  --ink-on-accent: #FAF8F3;       /* Warm Alabaster on solid buttons (replaces glaring #FFFFFF) */
  --border-optical-creative: #2C3E35; /* Spectacle-safe contour replacing harsh #111111 */
  --shadow-optical-tactile: 3px 3px 0px rgba(22, 56, 44, 0.22); /* Softened tactile plinth shadow */

  --tier-core-accent: #24523E;
  --tier-core-pine: #16382C;
  --tier-core-surface-wash: #EAF0EC;

  --tier-child-accent: #9A5B13;
  --tier-child-border: #C89D66;
  --tier-child-plinth-bg: #F2EEE5;
  --tier-child-surface-wash: #F5EFE2;

  --tier-specialist-accent: #A84432;
  --tier-specialist-border: #CFA096;
  --tier-specialist-plinth-bg: #F4ECE9;
  --tier-specialist-surface-wash: #F6E8E4;

  --ink-child-aa: #25332C; /* Certified 8.4:1 spectacle-safe contrast on warm mineral washes */
  --tracking-optical-body: 0.01em;
  --tracking-optical-ui: 0.015em;

  /* Quantitative 4-Tier Button & Interactive Control Sizing Standards */
  --btn-size-xs: 24px;  /* Tier 1: Micro / Dense Toolbar & Track Header */
  --btn-size-sm: 28px;  /* Tier 2: Compact Navigation & Utility Strip */
  --btn-size-md: 34px;  /* Tier 3: Standard Desktop Action Button */
  --btn-size-lg: 44px;  /* Tier 4: Hero CTA & Coarse Pointer Touch Target */

  --btn-pad-xs: 0 8px;
  --btn-pad-sm: 0 10px;
  --btn-pad-md: 0 14px;
  --btn-pad-lg: 0 20px;

  --btn-radius-xs: 6px;
  --btn-radius-sm: 6px;
  --btn-radius-md: 8px;
  --btn-radius-lg: 10px;

  --control-toggle-width: 36px;
  --control-toggle-height: 20px;
  --control-checkbox-size: 18px;
  --control-slider-track: 6px;
  --control-slider-thumb: 16px;

  /* Sovereign Tri-Pane Window & Modal Viewport Bounds */
  --window-drawer-width: clamp(380px, 32vw, 480px);
  --window-drawer-ultrawide: 540px;
  --window-cmd-width: 560px;
  --window-dialog-width: 420px;
  --window-side-peek-width: 640px;

  /* Adaptive WCAG 2.4.11 Focus Ring Tokens */
  --focus-ring-light: #0284C7;
  --focus-ring-dark: #38BDF8;
}