/* =============================================================
   ERP Coop — Design System Tokens
   Source: uploads/design-system-showcase-v3.html (v3 · Mesh · Glass · Squircle)
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,400;8..144,500;8..144,600;8..144,700;8..144,800&family=Roboto+Mono:wght@400;500&display=swap');

:root {

  /* ═══════════════════════════════════════════
     COLOR PRIMITIVES
     ═══════════════════════════════════════════ */

  /* Green — primary / agriculture */
  --green-50:  #f1f8f3;
  --green-100: #dcedde;
  --green-200: #b8dbbf;
  --green-300: #8cc395;
  --green-400: #5fa56b;
  --green-500: #3d8a4a;
  --green-600: #2e7d32;
  --green-700: #25602a;
  --green-800: #1d4822;
  --green-900: #14331a;

  /* Earth — secondary / terre */
  --earth-50:  #faf6f1;
  --earth-100: #efe6d8;
  --earth-200: #ddc8a8;
  --earth-300: #c6a679;
  --earth-400: #ad8657;
  --earth-500: #8e6a3f;
  --earth-600: #735432;
  --earth-700: #5a4127;
  --earth-800: #41301d;
  --earth-900: #2a1f13;

  /* Sky — tertiary / ciel */
  --sky-50:  #eef7fc;
  --sky-100: #d2eaf6;
  --sky-200: #a5d4ed;
  --sky-300: #6fb8df;
  --sky-400: #3d99cc;
  --sky-500: #1f7eb4;
  --sky-600: #186593;
  --sky-700: #134e72;
  --sky-800: #0d3852;
  --sky-900: #082335;

  /* Amber — warning / alerte */
  --amber-50:  #fff7e6;
  --amber-100: #ffe8b8;
  --amber-200: #ffd47a;
  --amber-300: #f8b94a;
  --amber-400: #ea9d24;
  --amber-500: #c78213;
  --amber-600: #9d6709;
  --amber-700: #784f06;
  --amber-800: #553804;
  --amber-900: #352302;

  /* Neutral — warm-tinted (not grey) */
  --neutral-0:   #ffffff;
  --neutral-50:  #faf9f6;
  --neutral-100: #f1efe9;
  --neutral-200: #e0ddd3;
  --neutral-300: #c1bdaf;
  --neutral-400: #989485;
  --neutral-500: #6d6a5d;
  --neutral-600: #4d4a40;
  --neutral-700: #34322a;
  --neutral-800: #1f1e18;
  --neutral-900: #0f0e0a;

  /* Red — error */
  --red-50:  #fdecec;
  --red-100: #fad1d1;
  --red-200: #f3a3a3;
  --red-300: #e87070;
  --red-400: #d84747;
  --red-500: #bf2f2f;
  --red-600: #9d2222;
  --red-700: #7a1a1a;
  --red-800: #561212;
  --red-900: #340a0a;


  /* ═══════════════════════════════════════════
     SEMANTIC COLOR TOKENS (M3 Tonal System)
     ═══════════════════════════════════════════ */

  --color-primary:                 var(--green-600);
  --color-on-primary:              var(--neutral-0);
  --color-primary-container:       var(--green-100);
  --color-on-primary-container:    var(--green-900);

  --color-secondary:               var(--earth-600);
  --color-on-secondary:            var(--neutral-0);
  --color-secondary-container:     var(--earth-100);
  --color-on-secondary-container:  var(--earth-900);

  --color-tertiary:                var(--sky-600);
  --color-on-tertiary:             var(--neutral-0);
  --color-tertiary-container:      var(--sky-100);
  --color-on-tertiary-container:   var(--sky-900);

  --color-warning:                 var(--amber-500);
  --color-on-warning:              var(--neutral-900);
  --color-warning-container:       var(--amber-100);
  --color-on-warning-container:    var(--amber-900);

  --color-error:                   var(--red-600);
  --color-on-error:                var(--neutral-0);
  --color-error-container:         var(--red-100);
  --color-on-error-container:      var(--red-900);

  /* Surface scale — warm tinted */
  --color-surface-lowest: #ffffff;
  --color-surface-low:    #fbfaf5;
  --color-surface:        #f7f5ed;
  --color-surface-high:   #f0ede2;
  --color-surface-highest:#e8e4d7;

  --color-on-surface:         var(--neutral-900);
  --color-on-surface-variant: var(--neutral-600);
  --color-outline:            var(--neutral-300);
  --color-outline-variant:    var(--neutral-200);
  --color-focus-ring:         var(--sky-500);


  /* ═══════════════════════════════════════════
     SILO STATE COLORS (domain-specific)
     ═══════════════════════════════════════════ */

  --state-empty:    var(--neutral-300);
  --state-filling:  #e8741e;
  --state-full:     var(--green-600);
  --state-transfer: #d4a017;
  --state-pending:  var(--sky-500);
  --state-blocked:  var(--red-600);


  /* ═══════════════════════════════════════════
     TYPOGRAPHY
     ═══════════════════════════════════════════ */

  --font-sans: 'Roboto Flex', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'Roboto Mono', ui-monospace, 'Cascadia Code', monospace;

  /* Type scale (rem) */
  --display-l:    3.5625rem;  /* 57px */
  --display-m:    2.8125rem;  /* 45px */
  --display-s:    2.25rem;    /* 36px */

  --headline-l:   2rem;       /* 32px */
  --headline-m:   1.75rem;    /* 28px */
  --headline-s:   1.5rem;     /* 24px */

  --title-l:      1.375rem;   /* 22px */
  --title-m:      1rem;       /* 16px */
  --title-s:      0.875rem;   /* 14px */

  --body-l:       1rem;       /* 16px */
  --body-m:       0.875rem;   /* 14px */
  --body-s:       0.75rem;    /* 12px */

  --label-l:      0.875rem;   /* 14px */
  --label-m:      0.75rem;    /* 12px */
  --label-s:      0.6875rem;  /* 11px */

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


  /* ═══════════════════════════════════════════
     SPACING — multiples of 4px
     ═══════════════════════════════════════════ */

  --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 */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */


  /* ═══════════════════════════════════════════
     SHAPE / RADIUS (M3 Expressive)
     ═══════════════════════════════════════════ */

  --shape-xs:   0.25rem;   /*  4px */
  --shape-s:    0.5rem;    /*  8px */
  --shape-m:    0.75rem;   /* 12px */
  --shape-l:    1rem;      /* 16px */
  --shape-xl:   1.75rem;   /* 28px */
  --shape-2xl:  2.5rem;    /* 40px */
  --shape-full: 9999px;    /* pill */

  /* Squircle — signature app-icon shape */
  --squircle: 28%;


  /* ═══════════════════════════════════════════
     ELEVATION / SHADOWS (warm-tinted)
     ═══════════════════════════════════════════ */

  --elev-1: 0 1px 2px rgba(15,14,10,.06),  0 1px 3px rgba(15,14,10,.03);
  --elev-2: 0 1px 2px rgba(15,14,10,.06),  0 2px 6px rgba(15,14,10,.08);
  --elev-3: 0 4px 8px rgba(15,14,10,.10),  0 1px 3px rgba(15,14,10,.06);
  --elev-4: 0 6px 12px rgba(15,14,10,.12), 0 2px 4px rgba(15,14,10,.06);
  --elev-5: 0 12px 24px rgba(15,14,10,.16),0 4px 8px rgba(15,14,10,.08);


  /* ═══════════════════════════════════════════
     GLOW ACCENTS (hover shadows, brand-colored)
     ═══════════════════════════════════════════ */

  --glow-primary:   0 12px 32px -8px rgba(46,125,50,0.55),  0 4px 12px -2px rgba(46,125,50,0.35);
  --glow-secondary: 0 12px 32px -8px rgba(115,84,50,0.50),  0 4px 12px -2px rgba(115,84,50,0.30);
  --glow-tertiary:  0 12px 32px -8px rgba(24,101,147,0.55), 0 4px 12px -2px rgba(24,101,147,0.35);
  --glow-warning:   0 12px 32px -8px rgba(199,130,19,0.55), 0 4px 12px -2px rgba(199,130,19,0.35);
  --glow-error:     0 12px 32px -8px rgba(157,34,34,0.55),  0 4px 12px -2px rgba(157,34,34,0.35);


  /* ═══════════════════════════════════════════
     MOTION (spring-physics based)
     ═══════════════════════════════════════════ */

  --ease-emphasized:      cubic-bezier(0.2, 0, 0, 1);
  --ease-spring-soft:     cubic-bezier(0.3, 1.4, 0.6, 1);
  --ease-spring-bouncy:   cubic-bezier(0.28, 1.6, 0.5, 1);

  --dur-short-1:   100ms;
  --dur-short-2:   200ms;
  --dur-medium-1:  250ms;
  --dur-medium-2:  350ms;
  --dur-long-1:    450ms;
  --dur-long-2:    550ms;


  /* ═══════════════════════════════════════════
     Z-INDEX STACK
     ═══════════════════════════════════════════ */

  --z-base:    1;
  --z-raised:  10;
  --z-overlay: 100;
  --z-sticky:  1100;
  --z-modal:   1300;
  --z-toast:   1500;
}


/* ═══════════════════════════════════════════
   ACCESSIBILITY MODES
   ═══════════════════════════════════════════ */

/* Senior mode — larger text & spacing */
[data-senior="on"] {
  --body-s:     0.875rem;
  --body-m:     1rem;
  --body-l:     1.125rem;
  --title-s:    1rem;
  --title-m:    1.125rem;
  --title-l:    1.5rem;
  --headline-s: 1.625rem;
  --headline-m: 1.875rem;
  --headline-l: 2.25rem;
  --space-3:    0.875rem;
  --space-4:    1.25rem;
  --space-6:    1.75rem;
}

/* Outdoor / terrain mode — high contrast, removes glass/translucency */
[data-outdoor="on"] {
  --color-on-surface:          #000000;
  --color-on-surface-variant:  var(--neutral-700);
  --color-outline:             var(--neutral-500);
  --color-outline-variant:     var(--neutral-400);
  --color-surface:             #ffffff;
  --color-surface-low:         #ffffff;
  --color-surface-lowest:      #ffffff;
  --color-surface-high:        var(--neutral-50);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:   0.001ms !important;
    transition-duration:  0.001ms !important;
  }
}


/* ═══════════════════════════════════════════
   BASE RESETS & TYPOGRAPHY DEFAULTS
   ═══════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 16px; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--body-l);
  line-height: 1.5;
  color: var(--color-on-surface);
  background-color: var(--color-surface);
  -webkit-font-smoothing: antialiased;
  font-variation-settings: "opsz" 16, "wdth" 100;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-3);
  line-height: 1.15;
}

/* Semantic heading styles */
h1 {
  font-size: var(--display-s);
  font-weight: var(--weight-bold);
  letter-spacing: -0.025em;
  font-variation-settings: "opsz" 36;
}
h2 {
  font-size: var(--headline-m);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
  font-variation-settings: "opsz" 28;
}
h3 {
  font-size: var(--title-l);
  font-weight: var(--weight-medium);
}
h4 {
  font-size: var(--label-l);
  font-weight: var(--weight-semibold);
  color: var(--color-on-surface-variant);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: rgba(255,255,255,0.55);
  padding: 0.05em 0.4em;
  border-radius: var(--shape-xs);
  border: 1px solid var(--color-outline-variant);
}

:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--shape-xs);
}

/* Mesh gradient page background (apply to body or .app-page) */
.mesh-bg {
  background:
    radial-gradient(at 12% 8%,   var(--green-100) 0%, transparent 45%),
    radial-gradient(at 88% 12%,  var(--sky-100)   0%, transparent 42%),
    radial-gradient(at 50% 110%, var(--earth-100) 0%, transparent 55%),
    var(--color-surface);
  background-attachment: fixed;
}