/*
  Niranta design tokens.

  Taken from the brand's own materials: the logo's rose-gold line work, the
  blush card stock of the visiting card, and the 16-screen mockup in
  "Jewellery E-commerce Platform Design". That folder is a visual reference
  only — its markup is never copied, but these values are the brand, so they
  are carried across exactly.

  Every colour, radius and shadow a page needs is named here. Nothing else in
  the codebase writes a raw hex value: a brand that drifts across screens is
  the thing this file exists to prevent.
*/

:root {
  /* ---- Brand -------------------------------------------------------- */

  /* The rose-maroon of the logo and the visiting card. */
  --n-primary: #B4474E;
  --n-primary-dark: #8E3038;
  --n-primary-soft: #D39A92;

  /* Ink. Warm near-brown rather than black — black against blush reads cold. */
  --n-ink: #4B2A2E;
  --n-ink-soft: #5E4346;
  --n-ink-muted: #8A6A6D;
  --n-ink-faint: #A88E90;

  /* ---- Surfaces ------------------------------------------------------ */

  --n-surface: #FFFFFF;
  --n-surface-raised: #FBF5F3;
  --n-surface-blush: #FBEFEC;
  --n-surface-warm: #F6E3DE;

  /* The page behind everything. The mockup's app and admin shells sit on this. */
  --n-bg: #FBF5F1;
  --n-bg-deep: #EFE4DE;

  --n-border: #E6D4CF;
  --n-border-soft: #F1E6E2;
  --n-border-strong: #D9C3BE;

  /* ---- Status -------------------------------------------------------- */

  /* Shared by the storefront and the admin: a delivered order and an active
     product are the same green wherever they appear. */
  --n-success: #2E8B57;
  --n-success-bg: #E6F4EC;
  --n-warning: #B86A2A;
  --n-warning-bg: #FDF0E6;
  --n-danger: #C0392B;
  --n-danger-bg: #FBE9E7;
  --n-info: #2F5F9E;
  --n-info-bg: #EAF2FB;

  /* ---- Type ---------------------------------------------------------- */

  /* Cormorant Garamond for display, Jost for everything else — the pairing
     from the mockup, and close to the visiting card's own lettering. */
  --n-font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --n-font-body: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --n-text-xs: 11px;
  --n-text-sm: 12.5px;
  --n-text-base: 14px;
  --n-text-md: 16px;
  --n-text-lg: 19px;
  --n-text-xl: 24px;
  --n-text-2xl: 30px;
  --n-text-3xl: 38px;

  /* Wide tracking on small uppercase labels is what makes the brand read as
     jewellery rather than as a generic shop. */
  --n-tracking-wide: 0.12em;
  --n-tracking-wider: 0.14em;
  --n-tracking-widest: 0.22em;

  /* ---- Space --------------------------------------------------------- */

  --n-space-1: 4px;
  --n-space-2: 8px;
  --n-space-3: 12px;
  --n-space-4: 16px;
  --n-space-5: 20px;
  --n-space-6: 24px;
  --n-space-8: 32px;
  --n-space-10: 40px;
  --n-space-12: 48px;
  --n-space-16: 64px;

  /* ---- Shape --------------------------------------------------------- */

  --n-radius-sm: 10px;
  --n-radius: 12px;
  --n-radius-md: 14px;
  --n-radius-lg: 18px;
  --n-radius-pill: 999px;

  /* ---- Depth --------------------------------------------------------- */

  /* Shadows are tinted with the ink colour, not grey. A neutral shadow on a
     blush page looks like dirt. */
  --n-shadow-sm: 0 2px 8px rgba(75, 42, 46, 0.06);
  --n-shadow: 0 8px 24px rgba(75, 42, 46, 0.08);
  --n-shadow-lg: 0 20px 50px rgba(75, 42, 46, 0.12);

  /* ---- Layout -------------------------------------------------------- */

  --n-container: 1280px;
  --n-header-height: 72px;

  /* ---- Motion -------------------------------------------------------- */

  --n-transition: 160ms ease;
  --n-transition-slow: 280ms ease;
}

/*
  Respect a reader who has asked for less movement. Jewellery pages lean on
  hover transitions and image swaps, which is exactly what this setting is for.
*/
@media (prefers-reduced-motion: reduce) {
  :root {
    --n-transition: 0ms;
    --n-transition-slow: 0ms;
  }
}