/*
 * AgrStak Design Tokens
 * NumeriXGPT LLC · Lawrenceville, GA
 * Patent Pending · US App 63/970,943
 *
 * Single source of truth for the AgrStak React SPA.
 * All components import from this file — never hardcode values.
 *
 * Structure:
 *   1. Brand palette
 *   2. Semantic color tokens
 *   3. ACSL sector tokens
 *   4. Typography
 *   5. Spacing scale
 *   6. Border radius
 *   7. Shadows & elevation
 *   8. Z-index scale
 *   9. Animation
 *  10. Component-specific tokens
 *  11. Dark mode overrides
 */

/* ─────────────────────────────────────────────
   1. BRAND PALETTE
   Raw color values — do not use directly in components.
   Use semantic tokens below instead.
───────────────────────────────────────────── */
:root {
  /* Soil scale */
  --palette-soil-900: #0e0b05;
  --palette-soil-800: #1a1208;
  --palette-soil-700: #221808;
  --palette-soil-600: #2a1e0e;
  --palette-soil-500: #3a2a14;
  --palette-soil-400: #4a3820;
  --palette-soil-300: #6a5040;
  --palette-soil-200: #8a7060;
  --palette-soil-100: #a89070;
  --palette-soil-50:  #c8b090;

  /* Wheat gold scale */
  --palette-wheat-900: #7a5018;
  --palette-wheat-800: #a07020;
  --palette-wheat-700: #b4852c;
  --palette-wheat-600: #c8963c;
  --palette-wheat-500: #d4a84e;
  --palette-wheat-400: #e0b060;
  --palette-wheat-300: #e8c078;
  --palette-wheat-200: #f0d090;
  --palette-wheat-100: #f5deb0;
  --palette-wheat-50:  #faf0d8;

  /* Cream scale */
  --palette-cream-900: #8a7060;
  --palette-cream-800: #b09080;
  --palette-cream-700: #c8b098;
  --palette-cream-600: #d8c0a8;
  --palette-cream-500: #e8d0b8;
  --palette-cream-400: #f0dcc8;
  --palette-cream-300: #f5e8d8;
  --palette-cream-200: #f8f0e8;
  --palette-cream-100: #faf5ef;
  --palette-cream-50:  #fdfaf6;

  /* Corn green scale */
  --palette-green-900: #1a3010;
  --palette-green-800: #27500a;
  --palette-green-700: #3b6d11;
  --palette-green-600: #4a7c3f;
  --palette-green-500: #5a9048;
  --palette-green-400: #6aac5f;
  --palette-green-300: #8acc78;
  --palette-green-200: #aae098;
  --palette-green-100: #c8e8c0;
  --palette-green-50:  #eaf5e8;

  /* ACSL blue scale */
  --palette-acsl-900: #04142a;
  --palette-acsl-800: #0c2a50;
  --palette-acsl-700: #163a6a;
  --palette-acsl-600: #1e4a84;
  --palette-acsl-500: #2a4a7c;
  --palette-acsl-400: #3a5a90;
  --palette-acsl-300: #4a7abc;
  --palette-acsl-200: #7aaad8;
  --palette-acsl-100: #b0ccf0;
  --palette-acsl-50:  #e6f0fb;

  /* Alert / status */
  --palette-red-600:    #c0392b;
  --palette-red-400:    #e74c3c;
  --palette-red-100:    #fadbd8;
  --palette-orange-600: #d35400;
  --palette-orange-400: #e67e22;
  --palette-orange-100: #fdebd0;
}


/* ─────────────────────────────────────────────
   2. SEMANTIC COLOR TOKENS (light mode default)
   Use these in all components.
───────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --color-bg-base:       var(--palette-soil-800);   /* page background */
  --color-bg-surface:    var(--palette-soil-600);   /* cards, panels */
  --color-bg-elevated:   var(--palette-soil-500);   /* hover, active states */
  --color-bg-overlay:    rgba(26,18,8,0.92);        /* modals, drawers */
  --color-bg-inset:      var(--palette-soil-900);   /* inputs, code blocks */

  /* Text */
  --color-text-primary:  var(--palette-cream-300);  /* body text */
  --color-text-secondary:var(--palette-soil-100);   /* muted/secondary */
  --color-text-tertiary: var(--palette-soil-300);   /* placeholders, hints */
  --color-text-inverse:  var(--palette-soil-800);   /* text on wheat bg */
  --color-text-accent:   var(--palette-wheat-600);  /* links, highlights */

  /* Brand accent */
  --color-accent:        var(--palette-wheat-600);
  --color-accent-hover:  var(--palette-wheat-400);
  --color-accent-muted:  rgba(200,150,60,0.15);
  --color-accent-border: rgba(200,150,60,0.25);
  --color-accent-strong: rgba(200,150,60,0.45);

  /* Science green */
  --color-science:       var(--palette-green-600);
  --color-science-hover: var(--palette-green-400);
  --color-science-muted: rgba(74,124,63,0.12);
  --color-science-border:rgba(74,124,63,0.28);
  --color-science-text:  var(--palette-green-300);

  /* Borders */
  --color-border-subtle: rgba(200,150,60,0.12);
  --color-border-default:rgba(200,150,60,0.22);
  --color-border-strong: rgba(200,150,60,0.40);
  --color-border-focus:  var(--palette-wheat-600);

  /* Status */
  --color-success:       var(--palette-green-400);
  --color-success-bg:    rgba(106,172,95,0.1);
  --color-warning:       var(--palette-wheat-500);
  --color-warning-bg:    rgba(212,168,78,0.1);
  --color-error:         var(--palette-red-400);
  --color-error-bg:      var(--palette-red-100);
  --color-info:          var(--palette-acsl-300);
  --color-info-bg:       rgba(74,122,188,0.1);
}


/* ─────────────────────────────────────────────
   3. ACSL SECTOR TOKENS
   Used exclusively in SF32–SF37 and the SectorBanner.
───────────────────────────────────────────── */
:root {
  --color-acsl-bg:         var(--palette-acsl-500);
  --color-acsl-bg-deep:    var(--palette-acsl-700);
  --color-acsl-bg-muted:   rgba(42,74,124,0.18);
  --color-acsl-border:     rgba(74,122,188,0.32);
  --color-acsl-border-strong: rgba(74,122,188,0.55);
  --color-acsl-text:       var(--palette-acsl-100);
  --color-acsl-text-muted: var(--palette-acsl-200);
  --color-acsl-accent:     var(--palette-acsl-300);

  /* USDA attribution stripe */
  --color-usda-stripe:     linear-gradient(
    135deg,
    var(--palette-acsl-700) 0%,
    #1a2e4a 50%,
    var(--palette-soil-600) 100%
  );
}


/* ─────────────────────────────────────────────
   4. TYPOGRAPHY
───────────────────────────────────────────── */
:root {
  /* Font families */
  --font-display:  'Playfair Display', Georgia, serif;
  --font-mono:     'DM Mono', 'Courier New', monospace;
  --font-sans:     'DM Sans', system-ui, sans-serif;

  /* Font sizes — modular scale (1.25 ratio) */
  --text-2xs:  0.60rem;   /*  9.6px — badges, micro labels */
  --text-xs:   0.68rem;   /* 10.9px — meta, timestamps */
  --text-sm:   0.78rem;   /* 12.5px — secondary body */
  --text-base: 0.88rem;   /* 14.1px — primary body */
  --text-md:   1.00rem;   /* 16px   — large body */
  --text-lg:   1.15rem;   /* 18.4px — section titles */
  --text-xl:   1.40rem;   /* 22.4px — card headers */
  --text-2xl:  1.75rem;   /* 28px   — page subtitles */
  --text-3xl:  2.20rem;   /* 35.2px — hero subheadings */
  --text-4xl:  2.80rem;   /* 44.8px — hero headings */
  --text-5xl:  3.50rem;   /* 56px   — display headings */

  /* Font weights */
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;

  /* Line heights */
  --leading-tight:  1.15;
  --leading-snug:   1.30;
  --leading-normal: 1.55;
  --leading-relaxed:1.72;
  --leading-loose:  2.00;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;
  --tracking-widest:  0.14em;
}


/* ─────────────────────────────────────────────
   5. SPACING SCALE
   4px base unit — all spacing is a multiple of 4.
───────────────────────────────────────────── */
:root {
  --space-0:   0px;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   28px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* Semantic spacing aliases */
  --gap-xs:    var(--space-2);
  --gap-sm:    var(--space-3);
  --gap-md:    var(--space-4);
  --gap-lg:    var(--space-6);
  --gap-xl:    var(--space-8);
  --gap-2xl:   var(--space-12);

  --padding-card:      var(--space-5) var(--space-6);
  --padding-panel:     var(--space-6) var(--space-8);
  --padding-section:   var(--space-10) var(--space-8);
  --padding-hero:      var(--space-16) var(--space-8);

  /* Layout widths */
  --width-content:     900px;
  --width-page:        1200px;
  --width-narrow:      640px;
  --width-sidebar:     320px;
  --width-usda-status: 420px;  /* USDA live bar status max-width */
}


/* ─────────────────────────────────────────────
   6. BORDER RADIUS
───────────────────────────────────────────── */
:root {
  --radius-none:   0px;
  --radius-xs:     2px;
  --radius-sm:     4px;
  --radius-md:     6px;
  --radius-lg:     8px;
  --radius-xl:     12px;
  --radius-2xl:    16px;
  --radius-3xl:    24px;
  --radius-full:   9999px;  /* pills */

  /* Semantic aliases */
  --radius-badge:  var(--radius-sm);
  --radius-btn:    var(--radius-md);
  --radius-card:   var(--radius-lg);
  --radius-panel:  var(--radius-xl);
  --radius-modal:  var(--radius-2xl);
  --radius-sector: var(--radius-lg);   /* ACSL sector banner */
}


/* ─────────────────────────────────────────────
   7. SHADOWS & ELEVATION
───────────────────────────────────────────── */
:root {
  --shadow-none:   none;
  --shadow-sm:     0 1px 3px rgba(0,0,0,0.3);
  --shadow-md:     0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg:     0 8px 24px rgba(0,0,0,0.5);
  --shadow-xl:     0 16px 48px rgba(0,0,0,0.6);

  /* Wheat glow — used on featured/active cards */
  --shadow-wheat:  0 0 0 1px var(--color-accent-border),
                   0 4px 16px rgba(200,150,60,0.12);

  /* ACSL glow — used on ACSL sector components */
  --shadow-acsl:   0 0 0 1px var(--color-acsl-border),
                   0 4px 16px rgba(74,122,188,0.10);

  /* Focus ring */
  --shadow-focus:  0 0 0 3px rgba(200,150,60,0.35);
}


/* ─────────────────────────────────────────────
   8. Z-INDEX SCALE
───────────────────────────────────────────── */
:root {
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
  --z-tooltip:  600;
}


/* ─────────────────────────────────────────────
   9. ANIMATION
───────────────────────────────────────────── */
:root {
  /* Durations */
  --duration-instant:  50ms;
  --duration-fast:     150ms;
  --duration-normal:   250ms;
  --duration-slow:     400ms;
  --duration-slower:   600ms;
  --duration-slowest:  900ms;

  /* Easing */
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --ease-inout:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-linear: linear;

  /* Common transitions */
  --transition-colors:    color var(--duration-fast) var(--ease-out),
                          background-color var(--duration-fast) var(--ease-out),
                          border-color var(--duration-fast) var(--ease-out);
  --transition-transform: transform var(--duration-normal) var(--ease-spring);
  --transition-opacity:   opacity var(--duration-normal) var(--ease-out);
  --transition-all:       all var(--duration-normal) var(--ease-out);
}


/* ─────────────────────────────────────────────
   10. COMPONENT-SPECIFIC TOKENS
   Keeps component styles predictable and override-friendly.
───────────────────────────────────────────── */
:root {

  /* ── TopBar ── */
  --topbar-height:       36px;
  --topbar-bg:           var(--color-bg-surface);
  --topbar-border:       var(--color-border-subtle);
  --topbar-text:         var(--color-text-secondary);
  --topbar-font:         var(--font-mono);
  --topbar-font-size:    var(--text-xs);

  /* ── SectorBanner ── */
  --sector-height:       48px;
  --sector-bg:           var(--color-acsl-bg-muted);
  --sector-border:       var(--color-acsl-border);
  --sector-border-width: 2px;
  --sector-text:         var(--color-acsl-text);
  --sector-label:        var(--color-acsl-accent);
  --sector-logo-size:    32px;
  --sector-logo-radius:  var(--radius-md);

  /* ── MainNav ── */
  --nav-height:          52px;
  --nav-bg:              var(--color-bg-surface);
  --nav-border:          var(--color-border-subtle);
  --nav-brand-font:      var(--font-display);
  --nav-brand-size:      var(--text-xl);
  --nav-brand-color:     var(--color-accent);
  --nav-link-color:      var(--color-text-secondary);
  --nav-link-active:     var(--color-accent);
  --nav-link-font-size:  var(--text-sm);
  --nav-link-weight:     var(--weight-medium);

  /* ── USDA Live Bar ── */
  --usda-bar-height:     38px;
  --usda-bar-bg:         rgba(26,18,8,0.80);
  --usda-bar-border:     var(--color-border-subtle);
  --usda-badge-bg:       var(--color-science);
  --usda-badge-color:    #ffffff;
  --usda-status-maxw:    var(--width-usda-status);
  --usda-status-color:   var(--color-text-secondary);
  --usda-btn-color:      var(--color-accent);
  --usda-btn-border:     var(--color-accent-strong);

  /* ── CalculatorCard ── */
  --calc-card-bg:        var(--color-bg-surface);
  --calc-card-border:    var(--color-border-subtle);
  --calc-card-radius:    var(--radius-card);
  --calc-card-padding:   var(--space-5);
  --calc-card-gap:       var(--space-4);
  --calc-card-hover-border: var(--color-border-default);
  --calc-card-featured-bg:  linear-gradient(
    135deg,
    #1e2e18 0%,
    var(--palette-soil-600) 100%
  );

  /* ── InlineChat ── */
  --chat-bg:             var(--color-bg-surface);
  --chat-border:         var(--color-border-subtle);
  --chat-header-bg:      var(--color-bg-elevated);
  --chat-dot-color:      var(--color-science-text);
  --chat-input-bg:       transparent;
  --chat-send-bg:        var(--color-science);
  --chat-send-hover:     var(--color-science-hover);
  --chat-min-height:     100px;
  --chat-max-height:     220px;
  --chat-label-user:     var(--color-accent);
  --chat-label-ai:       var(--color-science-text);

  /* ── ActionBar ── */
  --action-btn-border:   var(--color-border-strong);
  --action-btn-color:    var(--color-text-secondary);
  --action-btn-hover:    var(--color-accent);
  --action-btn-font:     var(--font-mono);
  --action-btn-size:     var(--text-xs);
  --action-btn-radius:   var(--radius-btn);
  --action-btn-padding:  var(--space-1) var(--space-3);

  /* ── AuthGuard / Pricing badges ── */
  --badge-free-bg:       var(--color-science-muted);
  --badge-free-color:    var(--color-science-text);
  --badge-pro-bg:        var(--color-accent-muted);
  --badge-pro-color:     var(--color-accent);
  --badge-enterprise-bg: var(--color-acsl-bg-muted);
  --badge-enterprise-color: var(--color-acsl-accent);

  /* ── UGI Submit Panel ── */
  --ugi-bg:              var(--color-info-bg);
  --ugi-border:          var(--color-acsl-border);
  --ugi-accent:          var(--color-acsl-accent);

  /* ── Sidebar ── */
  --sidebar-width:       var(--width-sidebar);
  --sidebar-card-bg:     var(--color-bg-surface);
  --sidebar-card-border: var(--color-border-subtle);
  --sidebar-title-color: var(--color-text-tertiary);
  --sidebar-title-font:  var(--font-mono);
  --sidebar-title-size:  var(--text-xs);
}


/* ─────────────────────────────────────────────
   11. DARK MODE OVERRIDES
   AgrStak is dark-first. These overrides handle
   system light-mode preference if ever needed.
───────────────────────────────────────────── */
@media (prefers-color-scheme: light) {
  :root {
    /* Only override if light mode support is added.
       Current platform is dark-first — no overrides needed.
       Placeholder for future USDA enterprise light theme. */
  }
}


/* ─────────────────────────────────────────────
   GLOBAL RESETS & BASE STYLES
───────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  background-color: var(--color-bg-base);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  min-height: 100vh;
}

/* Scrollbar styling */
::-webkit-scrollbar        { width: 6px; height: 6px; }
::-webkit-scrollbar-track  { background: var(--color-bg-base); }
::-webkit-scrollbar-thumb  { background: var(--palette-soil-400); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--palette-soil-300); }

/* Focus visible — accessibility */
:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* Selection */
::selection {
  background: var(--color-accent-muted);
  color: var(--color-text-primary);
}