/* ==========================================================================
   GenZ Gadgetry — Design Tokens  (v1.0)
   Single source of truth for colour, type, space, shape, depth and motion.
   Port 1:1 into Next.js (globals.css) or map into tailwind.config theme.
   Brand colours come from /logo/logo.svg:
     #120353  Night (indigo)   #000F9E  Royal (brand blue)   #00BFF2  Spark (cyan bolt)
   ========================================================================== */

:root {
  /* ---- Brand primitives ------------------------------------------------ */
  --gg-night:        #120353;   /* logo background — deep indigo */
  --gg-royal:        #000F9E;   /* logo wordmark — primary brand blue */
  --gg-spark:        #00BFF2;   /* logo bolt — accent cyan */

  /* Blue ramp (built around Royal) */
  --blue-50:  #EEF0FF;
  --blue-100: #DFE3FF;
  --blue-200: #C2CAFF;
  --blue-300: #98A5FF;
  --blue-400: #6376FA;
  --blue-500: #3448EE;
  --blue-600: #1628D0;
  --blue-700: #000F9E;          /* = --gg-royal */
  --blue-800: #030B7C;
  --blue-900: #0A0862;
  --blue-950: #120353;          /* = --gg-night */

  /* Cyan ramp (built around Spark) */
  --cyan-50:  #E6F9FE;
  --cyan-100: #C7F1FD;
  --cyan-200: #93E5FB;
  --cyan-300: #52D6F8;
  --cyan-400: #00BFF2;          /* = --gg-spark */
  --cyan-500: #00A6D6;
  --cyan-600: #0086B0;
  --cyan-700: #006A8C;

  /* Neutrals — indigo-tinted so greys sit inside the brand */
  --ink-950: #0E1030;
  --ink-800: #25284A;
  --ink-700: #3B3F5C;
  --ink-500: #6B7090;           /* lowest grey allowed for body text (4.8:1 on white) */
  --ink-400: #9AA0B8;           /* placeholders, disabled, decorative only */
  --ink-300: #C9CCDA;
  --ink-200: #E3E5EE;
  --ink-150: #ECEEF4;
  --ink-100: #F2F3F8;
  --ink-50:  #F7F8FC;
  --white:   #FFFFFF;

  /* Status */
  --green-500: #12A150;  --green-700: #0B7A3E;  --green-50: #E7F7EE;
  --red-500:   #F0443A;  --red-600:   #D92D26;  --red-700: #B42219;  --red-50: #FFEDEB;
  --amber-400: #F5A524;  --amber-700: #8F5200;  --amber-50: #FFF5E0;
  --violet-500:#6A4DF4;  --violet-50: #F1EDFF;

  /* Product media tiles — soft pastels from the reference layout */
  --tile-blue:  #D6E8FC;
  --tile-ice:   #EAF2FD;
  --tile-sky:   #CFE2FA;
  --tile-teal:  #CFE8EE;
  --tile-mint:  #D8F2E6;
  --tile-pink:  #FCE4E2;
  --tile-lilac: #F1DBFA;
  --tile-sand:  #FAEBD7;
  --tile-gray:  #ECEEF3;

  /* ---- Semantic colour -------------------------------------------------- */
  --color-bg:            #FBFBFE;
  --color-surface:       var(--white);
  --color-surface-2:     var(--ink-50);
  --color-surface-3:     var(--ink-100);
  --color-line:          var(--ink-200);
  --color-line-soft:     var(--ink-150);

  --color-text:          var(--ink-950);
  --color-text-2:        var(--ink-700);
  --color-text-muted:    var(--ink-500);
  --color-text-faint:    var(--ink-400);
  --color-text-invert:   var(--white);

  --color-primary:       var(--blue-700);
  --color-primary-hover: var(--blue-600);
  --color-primary-press: var(--blue-800);
  --color-primary-soft:  var(--blue-50);
  --color-accent:        var(--cyan-400);
  --color-accent-soft:   var(--cyan-50);
  --color-night:         var(--blue-950);

  --color-success:       var(--green-500);
  --color-success-ink:   var(--green-700);
  --color-success-soft:  var(--green-50);
  --color-sale:          var(--red-600);   /* white text passes AA */
  --color-sale-ink:      var(--red-700);
  --color-sale-soft:     var(--red-50);
  --color-warning:       var(--amber-400);
  --color-warning-ink:   var(--amber-700);
  --color-warning-soft:  var(--amber-50);

  --gradient-brand:  linear-gradient(135deg, var(--blue-950) 0%, var(--blue-700) 62%, var(--blue-500) 100%);
  --gradient-spark:  linear-gradient(135deg, var(--cyan-400) 0%, var(--blue-600) 100%);
  --gradient-coral:  linear-gradient(135deg, #F0808A 0%, #F59B98 52%, #F8B8A8 100%);
  --gradient-lilac:  linear-gradient(135deg, #E9D5FF 0%, #F5D0EE 55%, #FFE1E0 100%);
  --gradient-ice:    linear-gradient(135deg, #DDEEFF 0%, #E8F7FF 60%, #F3F0FF 100%);

  /* ---- Typography ------------------------------------------------------- */
  --font-sans: "Urbanist", "Noto Sans Bengali", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-num:  "Urbanist", ui-sans-serif, system-ui, sans-serif;

  --text-2xs: 0.6875rem;  /* 11 — eyebrows */
  --text-xs:  0.75rem;    /* 12 */
  --text-sm:  0.8125rem;  /* 13 */
  --text-base:0.9375rem;  /* 15 — body */
  --text-md:  1rem;       /* 16 */
  --text-lg:  1.125rem;   /* 18 */
  --text-xl:  1.25rem;    /* 20 */
  --text-2xl: 1.5rem;     /* 24 */
  --text-3xl: 1.875rem;   /* 30 */
  --text-4xl: 2.375rem;   /* 38 */
  --text-5xl: 3rem;       /* 48 */

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;
  --weight-black:   800;

  --leading-tight: 1.15;
  --leading-snug:  1.3;
  --leading-body:  1.55;
  --tracking-tight: -0.015em;
  --tracking-eyebrow: 0.09em;

  /* ---- Space (4px grid) ------------------------------------------------- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-7: 28px;  --space-8: 32px;
  --space-10: 40px; --space-12: 48px; --space-14: 56px; --space-16: 64px;
  --space-20: 80px;

  /* ---- Shape ------------------------------------------------------------ */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   14px;
  --radius-lg:   20px;   /* product tiles, cards */
  --radius-xl:   24px;   /* hero, banners */
  --radius-2xl:  32px;   /* feature bands */
  --radius-pill: 999px;

  --border-1: 1px solid var(--color-line);
  --border-soft: 1px solid var(--color-line-soft);

  /* ---- Depth (indigo-tinted shadows) ------------------------------------ */
  --shadow-xs: 0 1px 2px rgba(18, 3, 83, .06);
  --shadow-sm: 0 4px 12px -4px rgba(18, 3, 83, .12);
  --shadow-md: 0 14px 32px -14px rgba(18, 3, 83, .26);
  --shadow-lg: 0 28px 64px -22px rgba(18, 3, 83, .36);
  --shadow-primary: 0 12px 26px -12px rgba(0, 15, 158, .6);
  --ring: 0 0 0 3px rgba(0, 191, 242, .55);

  /* ---- Motion ----------------------------------------------------------- */
  --ease-out:    cubic-bezier(.22, 1, .36, 1);     /* default: quick start, soft landing */
  --ease-in-out: cubic-bezier(.65, .05, .36, 1);   /* sliders, sheets */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);  /* tiny pops: badges, hearts */
  --dur-1: 120ms;   /* press, colour */
  --dur-2: 200ms;   /* hover */
  --dur-3: 320ms;   /* dropdowns, tabs */
  --dur-4: 480ms;   /* drawers, modals */
  --dur-5: 720ms;   /* section reveals, hero */

  /* ---- Layout ----------------------------------------------------------- */
  --container:   1440px;
  --gutter:      24px;
  --sidebar-w:   232px;
  --header-h:    76px;
  --topbar-h:    36px;

  /* ---- Layers ----------------------------------------------------------- */
  --z-sticky:   40;
  --z-header:   50;
  --z-dropdown: 60;
  --z-drawer:   80;
  --z-modal:    90;
  --z-toast:    100;
}

@media (max-width: 767px) {
  :root {
    --gutter: 16px;
    --header-h: 64px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
  }
}