/* Design Tokens: Fresh Juice CRM Admin Portal & Client Portal Theme Layer
   Centralized colors, scales, glass layers, typography, radii, shadows, and motion.
   No hard-coded color values should be used outside this token layer. */

:root {
  /* --- Primary / Brand (Deep forest green: #1A5F32) --- */
  --fj-primary-50:  #F2F8F4;
  --fj-primary-100: #E2EFE7;
  --fj-primary-200: #C5DFD0;
  --fj-primary-300: #98C5A9;
  --fj-primary-400: #60A37A;
  --fj-primary-500: #1A5F32; /* Core brand */
  --fj-primary-600: #16532B;
  --fj-primary-700: #124323;
  --fj-primary-800: #0E341B;
  --fj-primary-900: #0A2514;

  /* --- Accent (Soft olive-lime green: #B1BF5E) --- */
  --fj-accent-50:  #F9FAF0;
  --fj-accent-100: #F1F4DC;
  --fj-accent-200: #E2EAB9;
  --fj-accent-300: #CFDD8E;
  --fj-accent-400: #B1BF5E; /* Core accent */
  --fj-accent-500: #96A544;
  --fj-accent-600: #7A8736;
  --fj-accent-700: #5F692A;
  --fj-accent-800: #444C1E;
  --fj-accent-900: #2D3214;

  /* --- Canvas & Highlights --- */
  --fj-canvas: #EAE6D6;            /* Warm cream base */
  --fj-canvas-subtle: #F2EFE5;
  --fj-canvas-gradient: radial-gradient(ellipse at 10% 15%, rgba(177, 191, 94, 0.14) 0%, transparent 48%),
                        radial-gradient(ellipse at 88% 82%, rgba(26, 95, 50, 0.10) 0%, transparent 52%),
                        #EAE6D6;
  --fj-off-white: #FAF7F0;         /* Highlights / text on dark */
  --fj-white: #FFFFFF;

  /* --- Neutrals (Warm, green-tinted grays) --- */
  --fj-text: #162218;             /* Very dark green-tinted gray */
  --fj-text-secondary: #3D4C40;
  --fj-muted: #5C6C60;
  --fj-subtle: #87978B;
  --fj-border-subtle: rgba(26, 95, 50, 0.08);
  --fj-border-hairline: rgba(26, 95, 50, 0.12);
  --fj-border-strong: rgba(26, 95, 50, 0.20);

  /* --- Glass Surface Hierarchy --- */
  /* Level 0: Canvas */
  --fj-glass-0: var(--fj-canvas);

  /* Level 1: App Shell (Floating sidebar, main content panel) */
  --fj-glass-1-bg: rgba(250, 247, 240, 0.72);
  --fj-glass-1-border: rgba(26, 95, 50, 0.11);
  --fj-glass-1-blur: blur(16px);
  --fj-glass-1-shadow: 0 8px 32px -4px rgba(22, 34, 24, 0.06), 0 1px 3px 0 rgba(22, 34, 24, 0.03);

  /* Level 2: Cards & Table Containers */
  --fj-glass-2-bg: rgba(255, 255, 255, 0.82);
  --fj-glass-2-border: rgba(26, 95, 50, 0.09);
  --fj-glass-2-blur: blur(12px);
  --fj-glass-2-shadow: 0 4px 20px -2px rgba(22, 34, 24, 0.05), 0 1px 2px 0 rgba(22, 34, 24, 0.03);

  /* Level 3: Floating Elements (Modals, Popovers, Dropdowns, Floating Action Bars) */
  --fj-glass-3-bg: rgba(255, 255, 255, 0.94);
  --fj-glass-3-border: rgba(26, 95, 50, 0.15);
  --fj-glass-3-blur: blur(24px);
  --fj-glass-3-shadow: 0 20px 48px -4px rgba(22, 34, 24, 0.12), 0 2px 6px 0 rgba(22, 34, 24, 0.04);

  /* Solid Fallback for surfaces */
  --fj-surface-solid: #FDFCF9;

  /* --- Radii (3-4 tokens) --- */
  --fj-radius-lg: 20px;   /* Shell containers, main panels, modals */
  --fj-radius-md: 12px;   /* Cards, table containers, inputs */
  --fj-radius-sm: 8px;    /* Buttons, inner items, small components */
  --fj-radius-full: 999px; /* Status chips, pill badges, circular buttons */

  /* --- Shadows (Soft, diffuse, green-tinted) --- */
  --fj-shadow-sm: 0 1px 3px rgba(22, 34, 24, 0.05);
  --fj-shadow-md: 0 4px 16px -2px rgba(22, 34, 24, 0.07);
  --fj-shadow-lg: 0 12px 32px -4px rgba(22, 34, 24, 0.10);
  --fj-focus-ring: 0 0 0 3px rgba(26, 95, 50, 0.22);
  --fj-focus-outline: 2px solid var(--fj-primary-500);

  /* --- Harmonized Semantic Status Colors (Soft tints, darker same-hue text) --- */
  --fj-status-pending-bg:   #FFF3E2;
  --fj-status-pending-fg:   #8C4B08;
  --fj-status-pending-bd:   rgba(140, 75, 8, 0.16);

  --fj-status-confirmed-bg: #EBF2F7;
  --fj-status-confirmed-fg: #204A6E;
  --fj-status-confirmed-bd: rgba(32, 74, 110, 0.16);

  --fj-status-ofd-bg:       #F2F5DE;
  --fj-status-ofd-fg:       #53631A;
  --fj-status-ofd-bd:       rgba(83, 99, 26, 0.18);

  --fj-status-ok-bg:        #E4F1E9;
  --fj-status-ok-fg:        #16532B;
  --fj-status-ok-bd:        rgba(22, 83, 43, 0.18);

  --fj-status-warn-bg:      #FFF3E2;
  --fj-status-warn-fg:      #8C4B08;
  --fj-status-warn-bd:      rgba(140, 75, 8, 0.16);

  --fj-status-err-bg:       #FDECEB;
  --fj-status-err-fg:       #912722;
  --fj-status-err-bd:       rgba(145, 39, 34, 0.16);

  /* --- Typography Scale (12 / 13 / 14 / 16 / 20 / 28 / 36) --- */
  --fj-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --fj-type-12: 12px;
  --fj-type-13: 13px;
  --fj-type-14: 14px;
  --fj-type-16: 16px;
  --fj-type-20: 20px;
  --fj-type-28: 28px;
  --fj-type-36: 36px;

  /* --- Transitions & Motion Tokens --- */
  --fj-dur-instant: 100ms;
  --fj-dur-fast:    180ms;
  --fj-dur-base:    280ms;
  --fj-dur-slow:    520ms;
  --fj-dur-hero:    900ms;

  --fj-ease-std:    cubic-bezier(0.22, 1, 0.36, 1);
  --fj-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --fj-ease-linear: linear;

  --fj-motion-fast: var(--fj-dur-fast) var(--fj-ease-std);
  --fj-motion-base: var(--fj-dur-base) var(--fj-ease-std);
  --fj-motion-slow: var(--fj-dur-slow) var(--fj-ease-std);

  /* --- Backward Compatibility Aliases --- */
  --fj-bg: var(--fj-canvas);
  --fj-green: var(--fj-primary-500);
  --fj-green-2: var(--fj-primary-600);
  --fj-card: var(--fj-glass-2-bg);
  --fj-border: var(--fj-border-hairline);
  --fj-orange: #E67A20;
  --fj-yellow: #D9B51E;
  --fj-lime: var(--fj-accent-400);
  --fj-burgundy: #8C2649;

  --fj-pending-bg: var(--fj-status-pending-bg);
  --fj-pending-fg: var(--fj-status-pending-fg);
  --fj-confirmed-bg: var(--fj-status-confirmed-bg);
  --fj-confirmed-fg: var(--fj-status-confirmed-fg);
  --fj-ofd-bg: var(--fj-status-ofd-bg);
  --fj-ofd-fg: var(--fj-status-ofd-fg);
  --fj-ok-bg: var(--fj-status-ok-bg);
  --fj-ok-fg: var(--fj-status-ok-fg);
  --fj-warn-bg: var(--fj-status-warn-bg);
  --fj-warn-fg: var(--fj-status-warn-fg);
  --fj-err-bg: var(--fj-status-err-bg);
  --fj-err-fg: var(--fj-status-err-fg);

  --fj-radius: var(--fj-radius-lg);
  --fj-radius-sm: var(--fj-radius-md);
  --fj-shadow: var(--fj-glass-2-shadow);
  --fj-focus: rgba(26, 95, 50, 0.35);

  /* Desk root aliases */
  --fjp-bg: var(--fj-canvas);
  --fjp-green: var(--fj-primary-500);
  --fjp-green-2: var(--fj-primary-600);
  --fjp-text: var(--fj-text);
  --fjp-muted: var(--fj-muted);
  --fjp-border: var(--fj-border-hairline);
  --fjp-orange: var(--fj-orange);
}

html[lang="ar"] {
  --fj-font: Cairo, "Noto Sans Arabic", Tahoma, sans-serif;
}

/* Dark mode palette (if supported) */
[data-theme="dark"], html[data-theme-mode="dark"] {
  --fj-canvas: #0D1F14;
  --fj-canvas-gradient: radial-gradient(ellipse at 15% 15%, rgba(177, 191, 94, 0.08) 0%, transparent 45%),
                        radial-gradient(ellipse at 85% 85%, rgba(26, 95, 50, 0.25) 0%, transparent 50%),
                        #0D1F14;
  --fj-text: #FAF7F0;
  --fj-text-secondary: #D4DDD5;
  --fj-muted: #9BAEA0;
  --fj-subtle: #738678;
  --fj-border-subtle: rgba(250, 247, 240, 0.08);
  --fj-border-hairline: rgba(250, 247, 240, 0.12);
  --fj-border-strong: rgba(250, 247, 240, 0.20);
  --fj-glass-1-bg: rgba(16, 37, 23, 0.75);
  --fj-glass-1-border: rgba(250, 247, 240, 0.12);
  --fj-glass-2-bg: rgba(20, 48, 30, 0.85);
  --fj-glass-2-border: rgba(250, 247, 240, 0.10);
  --fj-glass-3-bg: rgba(22, 54, 34, 0.96);
  --fj-glass-3-border: rgba(250, 247, 240, 0.18);
  --fj-surface-solid: #122B1B;
}