/* ============================================================
 * APIS Garment — Design tokens (ported from APIS Garment Design System)
 * Fonts, colors, typography, spacing, radii, shadows, motion.
 * ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,600&family=Be+Vietnam+Pro:ital,wght@0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ---- Brand blue scale (primary) ---- */
  --blue-50:  #EAF2FE;
  --blue-100: #D2E3FD;
  --blue-200: #A8C8FB;
  --blue-300: #76A6F7;
  --blue-400: #4389F3;
  --blue-500: #2080F0;  /* APIS logo blue — primary */
  --blue-600: #1668DA;
  --blue-700: #1A4D9E;  /* deep navy */
  --blue-800: #163C79;
  --blue-900: #122E58;
  --blue-950: #0C1E3C;

  /* ---- Orange accent (workwear polo) ---- */
  --orange-50:  #FEF3E7;
  --orange-100: #FBE0C2;
  --orange-300: #F6B36A;
  --orange-500: #F3922E;
  --orange-600: #DE7C18;
  --orange-700: #B25F0F;

  /* ---- Neutrals (cool gray) ---- */
  --gray-0:   #FFFFFF;
  --gray-25:  #FAFBFD;
  --gray-50:  #F3F5F9;
  --gray-100: #E8EBF1;
  --gray-200: #D6DBE5;
  --gray-300: #B9C1D0;
  --gray-400: #8C95A8;
  --gray-500: #697184;
  --gray-600: #515868;
  --gray-700: #3B414E;
  --gray-800: #272C36;
  --gray-900: #161A22;

  /* ---- Semantic status ---- */
  --green-500: #1E9E62;
  --green-50:  #E6F5ED;
  --red-500:   #DC3B3B;
  --red-50:    #FBE9E9;
  --amber-500: #E6A700;
  --amber-50:  #FCF3DA;

  /* ---- Semantic aliases ---- */
  --brand:            var(--blue-500);
  --brand-deep:       var(--blue-700);
  --brand-accent:     var(--orange-500);

  --text-strong:      var(--blue-900);
  --text-body:        var(--gray-700);
  --text-muted:       var(--gray-500);
  --text-on-brand:    #FFFFFF;
  --text-link:        var(--blue-600);

  --surface-page:     var(--gray-25);
  --surface-card:     #FFFFFF;
  --surface-subtle:   var(--gray-50);
  --surface-brand:    var(--blue-700);
  --surface-brand-soft: var(--blue-50);
  --surface-inverse:  var(--blue-950);

  --border:           var(--gray-200);
  --border-strong:    var(--gray-300);
  --border-brand:     var(--blue-200);

  --focus-ring:       var(--blue-400);

  --gradient-sky:       linear-gradient(160deg, #FFFFFF 0%, #E3EDFB 45%, #C5D9F4 100%);
  --gradient-brand:     linear-gradient(150deg, var(--blue-600) 0%, var(--blue-800) 100%);
  --gradient-card-glow: linear-gradient(180deg, #2E6FD6 0%, #173E86 100%);

  /* ---- Typography ---- */
  --font-display: 'Montserrat', system-ui, sans-serif;
  --font-body:    'Be Vietnam Pro', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extra:    800;
  --fw-black:    900;

  --fs-display-2xl: 4.5rem;
  --fs-display-xl:  3.5rem;
  --fs-display-lg:  2.75rem;
  --fs-h1:          2.25rem;
  --fs-h2:          1.75rem;
  --fs-h3:          1.375rem;
  --fs-h4:          1.125rem;
  --fs-body-lg:     1.125rem;
  --fs-body:        1rem;
  --fs-body-sm:     0.875rem;
  --fs-caption:     0.75rem;
  --fs-overline:    0.6875rem;

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --ls-tighter: -0.03em;
  --ls-tight:   -0.015em;
  --ls-normal:  0;
  --ls-wide:    0.04em;
  --ls-overline: 0.14em;

  /* ---- Spacing (4px grid) ---- */
  --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;  --space-20: 80px;  --space-24: 96px;

  /* ---- Radii ---- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   22px;
  --radius-2xl:  32px;
  --radius-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-xs:  0 1px 2px rgba(18, 46, 88, 0.06);
  --shadow-sm:  0 2px 8px rgba(18, 46, 88, 0.08);
  --shadow-md:  0 8px 24px rgba(18, 46, 88, 0.10);
  --shadow-lg:  0 18px 48px rgba(18, 46, 88, 0.14);
  --shadow-brand: 0 14px 34px rgba(22, 60, 121, 0.30);
  --shadow-inset-top: inset 0 1px 0 rgba(255,255,255,0.45);

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.2, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   360ms;

  /* ---- Layout ---- */
  --container-max: 1200px;
  --container-narrow: 760px;
}