/**
 * Modern Specialty Coffee — Design Tokens
 * Subject: third-wave café ERP system
 * Audience: café owners and operators who care about craft, precision, and workflow clarity
 * Aesthetic risk: high-contrast espresso base with a single matcha-green signal system
 */

:root {
  /* ============================================
     COLOR — Espresso / Crema / Matcha system
     ============================================ */
  --color-espresso-900: #0C0907;
  --color-espresso-800: #1A120B;
  --color-espresso-700: #2E2117;
  --color-espresso-600: #3D2E22;
  --color-espresso-500: #5A4030;

  --color-crema-50:  #FDFBF7;
  --color-crema-100: #F7F3EA;
  --color-crema-200: #EFE9DC;
  --color-crema-300: #E3D9C4;
  --color-crema-400: #D4C5A9;

  --color-matcha-300: #A3B86C;
  --color-matcha-400: #7D9448;
  --color-matcha-500: #5F7633;
  --color-matcha-600: #4A5D23;

  --color-amber-400: #D4A04A;
  --color-amber-500: #B8862E;

  --color-danger-500: #C44B4B;
  --color-danger-600: #A33A3A;

  --color-slate-400: #8A9AA0;
  --color-slate-500: #6B7B82;
  --color-slate-600: #4F5D63;

  /* Semantic mappings */
  --color-bg-primary:      var(--color-crema-50);
  --color-bg-secondary:    var(--color-crema-100);
  --color-bg-elevated:     var(--color-crema-50);
  --color-bg-inverse:      var(--color-espresso-800);

  --color-text-primary:    var(--color-espresso-800);
  --color-text-secondary:  var(--color-espresso-500);
  --color-text-tertiary:   var(--color-slate-500);
  --color-text-inverse:    var(--color-crema-100);

  --color-border:          var(--color-crema-300);
  --color-border-strong:   var(--color-crema-400);

  --color-accent:          var(--color-matcha-500);
  --color-accent-hover:    var(--color-matcha-600);
  --color-accent-subtle:   rgba(95, 118, 51, 0.08);

  --color-warning:         var(--color-amber-500);
  --color-danger:          var(--color-danger-500);

  /* ============================================
     TYPOGRAPHY — Scale and faces
     ============================================ */
  --font-display: 'Instrument Serif', 'Georgia', serif;
  --font-body:    'Inter', 'Helvetica Neue', sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', monospace;

  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.5rem;     /* 24px */
  --text-2xl:  2rem;       /* 32px */
  --text-3xl:  2.75rem;    /* 44px */

  --leading-tight: 1.15;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* ============================================
     SPACING — 4px base
     ============================================ */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-7: 3rem;      /* 48px */
  --space-8: 4rem;      /* 64px */

  /* ============================================
     BORDER RADIUS — Precision over roundness
     ============================================ */
  --radius-sm:   2px;
  --radius-md:   6px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* ============================================
     SHADOWS — Floating, elevated, grounded
     ============================================ */
  --shadow-sm:  0 1px 2px rgba(12, 9, 7, 0.04),
                0 1px 3px rgba(12, 9, 7, 0.06);
  --shadow-md:  0 4px 6px -1px rgba(12, 9, 7, 0.05),
                0 10px 15px -3px rgba(12, 9, 7, 0.06);
  --shadow-lg:  0 10px 25px -5px rgba(12, 9, 7, 0.08),
                0 20px 40px -10px rgba(12, 9, 7, 0.1);
  --shadow-xl:  0 20px 50px -12px rgba(12, 9, 7, 0.15),
                0 30px 60px -15px rgba(12, 9, 7, 0.12);
  --shadow-inner: inset 0 2px 4px rgba(12, 9, 7, 0.06);
  --shadow-glow: 0 0 0 3px rgba(95, 118, 51, 0.15);

  /* ============================================
     MOTION
     ============================================ */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;

  /* ============================================
     LAYOUT
     ============================================ */
  --sidebar-width: 260px;
  --header-height: 64px;
  --content-max: 1200px;
  --radius-card: var(--radius-lg);
}