/* QashPay design-system tokens — bundled from the shared design system,
   plus the eXgine accent layer. Do not edit token values here without
   syncing the upstream QashPay design system. */

/* ============================================================
   QashPay · Color tokens
   Brand: vivid magenta-pink accent, near-black ink, clean white.
   Pink #E6007E confirmed against assets/img/qashpay/qashpay_icon_pink.svg.
   ============================================================ */
:root {
  /* ---- Brand pink ramp ---- */
  --pink-50:  #FDE6F2;
  --pink-100: #FBCCE6;
  --pink-200: #F79AC9;
  --pink-300: #F266AC;
  --pink-400: #EE3391;
  --pink-500: #E6007E;   /* ← brand primary */
  --pink-600: #C4006B;
  --pink-700: #A00057;
  --pink-800: #78003F;
  --pink-900: #4F002A;

  /* ---- Ink / neutral ramp ---- */
  --white:    #FFFFFF;
  --gray-50:  #F9F9FB;
  --gray-100: #F2F2F6;
  --gray-200: #E5E5EC;
  --gray-300: #CDCDD8;
  --gray-400: #A2A2B2;
  --gray-500: #7A7A8C;
  --gray-600: #565667;
  --gray-700: #3A3A48;
  --gray-800: #23232F;
  --gray-900: #16161F;
  --ink:      #141420;   /* wordmark / primary text */
  --ink-950:  #0C0C13;

  /* ---- Semantic accents ---- */
  --green-100: #D6F3E6;
  --green-500: #10996A;
  --green-600: #0B7A54;
  --amber-100: #FDEECF;
  --amber-500: #E5920B;
  --amber-600: #B87209;
  --red-100:   #FBDCDD;
  --red-500:   #E5484D;
  --red-600:   #C13438;
  --blue-100:  #DCE9FE;
  --blue-500:  #2D7FF9;
  --blue-600:  #1C63D0;

  /* ============================================================
     Semantic aliases — reference these in components
     ============================================================ */
  --color-brand:            var(--pink-500);
  --color-brand-hover:      var(--pink-600);
  --color-brand-active:     var(--pink-700);
  --color-brand-subtle:     var(--pink-50);
  --color-brand-subtle-2:   var(--pink-100);
  --color-on-brand:         var(--white);

  /* Text */
  --text-strong:   var(--ink);
  --text-body:     var(--gray-700);
  --text-muted:    var(--gray-500);
  --text-subtle:   var(--gray-400);
  --text-inverse:  var(--white);
  --text-brand:    var(--pink-600);
  --text-link:     var(--pink-600);

  /* Surfaces */
  --surface-page:     var(--gray-50);
  --surface-card:     var(--white);
  --surface-raised:   var(--white);
  --surface-sunken:   var(--gray-100);
  --surface-inverse:  var(--ink);
  --surface-brand:    var(--pink-500);

  /* Borders */
  --border-subtle:  var(--gray-200);
  --border-default: var(--gray-300);
  --border-strong:  var(--gray-400);
  --border-brand:   var(--pink-500);
  --border-focus:   var(--pink-500);

  /* Feedback */
  --color-success:      var(--green-500);
  --color-success-bg:   var(--green-100);
  --color-warning:      var(--amber-500);
  --color-warning-bg:   var(--amber-100);
  --color-danger:       var(--red-500);
  --color-danger-bg:    var(--red-100);
  --color-info:         var(--blue-500);
  --color-info-bg:      var(--blue-100);

  /* Focus ring */
  --ring-brand: 0 0 0 3px rgba(230, 0, 126, 0.28);
}

/* ============================================================
   QashPay · Typography tokens
   ============================================================ */
:root {
  --font-display: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-sans:    'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Weights */
  --fw-regular:  400;  /* @kind font */
  --fw-medium:   500;  /* @kind font */
  --fw-semibold: 600;  /* @kind font */
  --fw-bold:     700;  /* @kind font */
  --fw-extra:    800;  /* @kind font */

  /* Type scale (px) — tuned for fintech marketing + product UI */
  --fs-display:  64px;   /* hero */
  --fs-h1:       48px;
  --fs-h2:       36px;
  --fs-h3:       28px;
  --fs-h4:       22px;
  --fs-h5:       18px;
  --fs-lg:       18px;
  --fs-body:     16px;
  --fs-sm:       14px;
  --fs-xs:       13px;
  --fs-2xs:      11px;

  /* Line heights */
  --lh-tight:    1.05;  /* @kind font */
  --lh-snug:     1.2;   /* @kind font */
  --lh-normal:   1.5;   /* @kind font */
  --lh-relaxed:  1.65;  /* @kind font */

  /* Letter spacing */
  --ls-tight:   -0.02em;  /* @kind font */
  --ls-snug:    -0.01em;  /* @kind font */
  --ls-normal:  0;        /* @kind font */
  --ls-wide:    0.04em;   /* @kind font */
  --ls-caps:    0.08em;   /* @kind font */
}

/* ============================================================
   QashPay · Spacing — 4px base grid
   ============================================================ */
:root {
  --space-0:   0;
  --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;
  --space-32:  128px;

  /* Layout */
  --container-max: 1200px;   /* matches qashpay.com content width */
  --gutter:        24px;
  --section-y:     96px;
}

/* ============================================================
   QashPay · Radius, shadows, motion
   Soft, generous rounding echoes the pebble-shaped brand mark.
   ============================================================ */
:root {
  /* Radii */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-2xl:  36px;
  --radius-pill: 999px;

  /* Shadows — cool, low-spread, tinted toward ink */
  --shadow-xs:  0 1px 2px rgba(20, 20, 32, 0.06);
  --shadow-sm:  0 2px 6px rgba(20, 20, 32, 0.07);
  --shadow-md:  0 6px 20px rgba(20, 20, 32, 0.09);
  --shadow-lg:  0 16px 40px rgba(20, 20, 32, 0.12);
  --shadow-xl:  0 28px 70px rgba(20, 20, 32, 0.16);
  --shadow-brand: 0 12px 30px rgba(230, 0, 126, 0.28);

  /* Motion */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in:       cubic-bezier(0.4, 0, 1, 1); /* @kind other */
  --dur-fast:      120ms; /* @kind other */
  --dur-normal:    200ms; /* @kind other */
  --dur-slow:      360ms; /* @kind other */
}

/* ============================================================
   eXgine accent layer — coral / mint over the QashPay ink base
   Source: exgine-brand-assets/brand-colours.txt
   ============================================================ */
:root {
  --coral:      #e0745f;
  --coral-600:  #cf5c46;
  --coral-700:  #b44a37;
  --coral-050:  #fbeee9;
  --coral-100:  #f6ddd4;
  --mint:       #82ceb7;
  --mint-600:   #5bb59a;
  --mint-050:   #eef8f4;
}