/* ============================================================
   ShipPlus Design System — Foundation Tokens
   Source: Figma page "design-system-foundation" (canvas 585:333)
     - Color Foundation   (589:788)  primitive + semantic scales
     - Typography         (588:1057) type scale
     - Foundation         (588:714)  aliases, spacing, radius,
                                     shadows, grid & breakpoints
   ============================================================ */

:root {
  /* ---------- Primitive: Primary (Teal) ---------- */
  --primary-50:  #ebf9f8;
  --primary-100: #d1f2ef;
  --primary-200: #a6e5e1;
  --primary-300: #73d6cf;
  --primary-400: #38c5bb;
  --primary-500: #00b5a8;
  --primary-600: #009a8f;
  --primary-700: #007f76;
  --primary-800: #00645c;
  --primary-900: #004843;

  /* ---------- Primitive: Secondary (Indigo) ---------- */
  --secondary-50:  #ebedf1;
  --secondary-100: #d3d7df;
  --secondary-200: #aab1c1;
  --secondary-300: #79849d;
  --secondary-400: #415074;
  --secondary-500: #0b1f4d;
  --secondary-600: #091a41;
  --secondary-700: #081636;
  --secondary-800: #06112a;
  --secondary-900: #040c1f;

  /* ---------- Primitive: Neutral ---------- */
  --neutral-0:    #ffffff;
  --neutral-50:   #fafafa;
  --neutral-100:  #f5f5f5;
  --neutral-200:  #e5e5e5;
  --neutral-300:  #d4d4d4;
  --neutral-400:  #a3a3a3;
  --neutral-500:  #737373;
  --neutral-600:  #525252;
  --neutral-700:  #404040;
  --neutral-800:  #262626;
  --neutral-900:  #171717;
  --neutral-1000: #000000;

  /* ---------- Semantic: Success ---------- */
  --success-50:  #ecfdf5;
  --success-100: #d1fae5;
  --success-200: #a7f3d0;
  --success-300: #6ee7b7;
  --success-400: #34d399;
  --success-500: #10b981;
  --success-600: #059669;
  --success-700: #047857;
  --success-800: #065f46;
  --success-900: #064e3b;

  /* ---------- Semantic: Warning ---------- */
  --warning-50:  #fffbeb;
  --warning-100: #fef3c7;
  --warning-200: #fde68a;
  --warning-300: #fcd34d;
  --warning-400: #fbbf24;
  --warning-500: #f59e0b;
  --warning-600: #d97706;
  --warning-700: #b45309;
  --warning-800: #92400e;
  --warning-900: #78350f;

  /* ---------- Semantic: Error ---------- */
  --error-50:  #fef2f2;
  --error-100: #fee2e2;
  --error-200: #fecaca;
  --error-300: #fca5a5;
  --error-400: #f87171;
  --error-500: #ef4444;
  --error-600: #dc2626;
  --error-700: #b91c1c;
  --error-800: #991b1b;
  --error-900: #7f1d1d;

  /* ---------- Semantic: Info ---------- */
  --info-50:  #eff6ff;
  --info-100: #dbeafe;
  --info-200: #bfdbfe;
  --info-300: #93c5fd;
  --info-400: #60a5fa;
  --info-500: #3b82f6;
  --info-600: #2563eb;
  --info-700: #1d4ed8;
  --info-800: #1e40af;
  --info-900: #1e3a8a;

  /* ---------- Alias: brand & usage (Foundation 01) ---------- */
  --color-bg-dark:          var(--primary-900);   /* Dark Default Background */
  --color-brand:            var(--primary-600);   /* Deep Teal Brand */
  --color-accent:           var(--primary-500);   /* Primary Teal Accent */
  --color-accent-bright:    var(--primary-400);   /* Bright Teal Accent */
  --color-surface-fresh:    var(--primary-50);    /* Subtle Fresh Surface */
  --color-nav:              var(--secondary-500); /* SaaS Navigation Blue */
  --color-indigo-brand:     var(--secondary-600); /* Deep Indigo Brand */
  --color-indigo-muted:     var(--secondary-400); /* Muted Indigo */
  --color-surface-indigo:   var(--secondary-50);  /* Subtle Indigo Surface */
  --color-deepest-dark:     var(--secondary-900); /* Deepest Dark */

  /* Neutral usage scale (slate/gray family from Foundation 01) */
  --color-text:             #0f172a; /* Slate 900 — Primary Body Text */
  --color-text-secondary:   #374151; /* Gray 700 — Secondary Text */
  --color-text-muted:       #6b7280; /* Gray 500 — Muted Annotations */
  --color-border:           #d1d5db; /* Gray 300 — Secondary Borders */
  --color-surface-accent:   #f3f4f6; /* Gray 100 — Surface Accents */
  --color-bg-page:          #f9fafb; /* Gray 50 — Page Backgrounds */
  --color-surface:          #ffffff; /* Pure White — Base Surface */

  /* Semantic feedback aliases */
  --color-success:          var(--success-500);  /* Positive States */
  --color-success-surface:  var(--success-100);  /* Toast / Badge Fill */
  --color-warning:          var(--warning-500);  /* Attention Required */
  --color-warning-surface:  var(--warning-100);  /* Toast / Badge Fill */
  --color-error:            var(--error-500);    /* Destructive Actions */
  --color-error-surface:    var(--error-100);    /* Alert Backdrop */
  --color-info:             var(--info-500);     /* Informational */
  --color-info-surface:     var(--info-100);     /* Banner Surface */

  /* ---------- Typography (02 + Typography frame) ---------- */
  --font-family-base: "Noto Sans Thai", "Inter", sans-serif;

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* Display */
  --text-display-xl: 700 64px/76px var(--font-family-base);
  --text-display-l:  700 56px/68px var(--font-family-base);
  --text-display-m:  700 48px/58px var(--font-family-base);

  /* Headings (default bold; semibold variant via weight token) */
  --text-h1: 700 48px/56px var(--font-family-base);
  --text-h2: 700 40px/48px var(--font-family-base);
  --text-h3: 700 32px/40px var(--font-family-base);
  --text-h4: 700 28px/36px var(--font-family-base);
  --text-h5: 700 24px/32px var(--font-family-base);
  --text-h6: 700 20px/28px var(--font-family-base);

  /* Body */
  --text-body-xl: 400 20px/32px var(--font-family-base);
  --text-body-lg: 400 18px/28px var(--font-family-base);
  --text-body-md: 400 16px/24px var(--font-family-base);
  --text-body-sm: 400 14px/20px var(--font-family-base);
  --text-body-xs: 400 12px/18px var(--font-family-base);

  /* Labels */
  --text-label-lg: 500 16px/24px var(--font-family-base);
  --text-label-md: 500 14px/20px var(--font-family-base);
  --text-label-sm: 500 12px/18px var(--font-family-base);

  /* Caption / Overline */
  --text-caption:  400 12px/18px var(--font-family-base);
  --text-overline: 700 10px/14px var(--font-family-base); /* uppercase */

  /* ---------- Spacing (03) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ---------- Border Radius (04) ---------- */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* ---------- Shadows & Elevation (05) ---------- */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.10);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);

  /* ---------- Grid & Breakpoints (06) ----------
     Custom properties can't drive media queries; values kept
     here as reference tokens for JS / documentation.
     Mobile   320px  •  4 cols • 16px gutter
     Tablet   768px  •  8 cols • 24px gutter
     Desktop  1024px • 12 cols • 32px gutter
     Wide     1440px • 12 cols • 40px gutter            */
  --breakpoint-mobile:  320px;
  --breakpoint-tablet:  768px;
  --breakpoint-desktop: 1024px;
  --breakpoint-wide:    1440px;
  --gutter-mobile:  16px;
  --gutter-tablet:  24px;
  --gutter-desktop: 32px;
  --gutter-wide:    40px;
}