/* ============================================================================
 * tokens.css · O-VERSE Design System v1.0
 * ----------------------------------------------------------------------------
 * Single source of truth for colors, spacing, typography, shadows, radii,
 * breakpoints, and animation across all O-VERSE frontend pages.
 *
 * Spec:    WORLD-CLASS-CHARTER.md §4 (charter v1.0 · 4 พ.ค. 2569)
 * Owner:   Weerasak
 * Created: Session 33
 *
 * Usage:
 *   <link rel="stylesheet" href="/css/tokens.css"> in <head> BEFORE inline <style>
 *   All 34 pages must reference this file.
 *   No hardcoded color/spacing/font/shadow/radius values allowed in components.
 *
 * Token tiers:
 *   PRIMITIVES (--color-{name}-{shade})  — raw palette · don't use in components
 *   SEMANTIC   (--brand-*, --state-*, --text-*, --surface-*) — USE THESE in components
 *
 * If a token doesn't exist for what you need:
 *   1. Propose it in PR description
 *   2. Update tokens.css in same PR
 *   3. Sync charter §4 in same PR
 *   Never hardcode.
 * ========================================================================== */

:root {

  /* ==========================================================================
   * §4.1 · COLOR PRIMITIVES (raw palette · don't reference directly)
   * ========================================================================== */

  /* Indigo · brand primary scale */
  --color-indigo-50:  #eef2ff;
  --color-indigo-100: #e0e7ff;
  --color-indigo-500: #6366f1;
  --color-indigo-700: #4338ca;

  /* Emerald · success scale */
  --color-emerald-50:  #ecfdf5;
  --color-emerald-100: #d1fae5;
  --color-emerald-500: #10b981;
  --color-emerald-700: #047857;

  /* Red · error scale */
  --color-red-50:  #fef2f2;
  --color-red-100: #fee2e2;
  --color-red-500: #ef4444;
  --color-red-700: #b91c1c;

  /* Amber · warning scale */
  --color-amber-50:  #fffbeb;
  --color-amber-100: #fef3c7;
  --color-amber-500: #f59e0b;
  --color-amber-700: #b45309;

  /* Gray · neutral scale */
  --color-gray-50:  #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-500: #6b7280;
  --color-gray-700: #374151;
  --color-gray-900: #111827;


  /* ==========================================================================
   * §4.1 · SEMANTIC COLORS (use these in components)
   *
   * Charter-strict (11 tokens · approved):
   *   --brand-primary, --brand-primary-hover, --surface-bg, --surface-card,
   *   --surface-border, --text-primary, --text-secondary,
   *   --state-success, --state-warning, --state-error, --state-info
   *
   * Charter §4.1 semantic expansion (S33 PM call · 11 additions):
   *   --brand-primary-bg, --text-on-brand, --surface-overlay,
   *   --state-{success,warning,error,info}-bg,
   *   --state-{success,warning,error,info}-border
   * ========================================================================== */

  /* Brand */
  --brand-primary:       var(--color-indigo-500);
  --brand-primary-hover: var(--color-indigo-700);
  --brand-primary-bg:    var(--color-indigo-50);    /* expansion · subtle indigo bg */

  /* Surfaces */
  --surface-bg:      var(--color-gray-50);
  --surface-card:    #ffffff;
  --surface-border:  var(--color-gray-200);
  --surface-overlay: rgba(0, 0, 0, 0.5);             /* expansion · modal backdrop */

  /* Text */
  --text-primary:   var(--color-gray-900);
  --text-secondary: var(--color-gray-500);
  --text-on-brand:  #ffffff;                          /* expansion · text on indigo button */

  /* States · main color */
  --state-success: var(--color-emerald-500);
  --state-warning: var(--color-amber-500);
  --state-error:   var(--color-red-500);
  --state-info:    var(--color-indigo-500);

  /* States · background (expansion · for banners/alerts) */
  --state-success-bg: var(--color-emerald-50);
  --state-warning-bg: var(--color-amber-50);
  --state-error-bg:   var(--color-red-50);
  --state-info-bg:    var(--color-indigo-50);

  /* States · border (expansion · for banner left-borders) */
  --state-success-border: var(--color-emerald-700);
  --state-warning-border: var(--color-amber-700);
  --state-error-border:   var(--color-red-700);
  --state-info-border:    var(--color-indigo-700);


  /* ==========================================================================
   * §4.2 · SPACING TOKENS (4-base grid)
   * Rule: no padding/margin value outside this scale
   * ========================================================================== */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;


  /* ==========================================================================
   * §4.3 · TYPOGRAPHY
   * ========================================================================== */

  /* Font stacks */
  --font-sans: 'Noto Sans Thai', 'Sarabun', -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, 'Courier New', monospace;

  /* Type scale */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-lg:   17px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;

  /* Weights */
  --font-regular:  400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;

  /* Line heights (named per Tailwind convention for familiarity) */
  --leading-tight:  1.1;   /* tabular numbers · displays */
  --leading-snug:   1.3;   /* headings */
  --leading-normal: 1.5;   /* body */


  /* ==========================================================================
   * §4.4 · SHADOWS (5 levels)
   * Use case: card=sm · CTA=md · floating panel=lg · modal=xl
   * ========================================================================== */
  --shadow-xs: 0 1px 2px  rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 2px 4px  rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.10);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.14);


  /* ==========================================================================
   * §4.5 · RADII (4 levels + full)
   * Use case: button=md · card=lg · modal=xl · pill/avatar=full
   * ========================================================================== */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-full: 9999px;


  /* ==========================================================================
   * §4.6 · BREAKPOINTS (mobile-first)
   *
   * NOTE: CSS custom properties cannot be used inside @media queries.
   * These values are documented here for reference; @media must use the
   * literal pixel values below.
   *
   * Reference values:
   *   --bp-sm: 640px   (small tablet portrait)
   *   --bp-md: 768px   (tablet portrait)
   *   --bp-lg: 1024px  (tablet landscape · POS primary device · small laptop)
   *   --bp-xl: 1280px  (desktop)
   *
   * POS tablet (primary cashier device) = 1024px landscape = lg breakpoint.
   * Exposed as custom properties below for use in JS (matchMedia helpers).
   * ========================================================================== */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;


  /* ==========================================================================
   * §4.7 · ANIMATION TOKENS
   * Reduced motion override below (Apple HIG · WCAG 2.3.3)
   * ========================================================================== */
  --duration-fast: 100ms;     /* button press */
  --duration-base: 200ms;     /* state change · hover */
  --duration-slow: 300ms;     /* modal · page transition */

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}


/* ============================================================================
 * Reduced motion · honor system preference
 * Per Apple HIG · WCAG 2.3.3 · charter §4.7
 * ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}
