/* Newton's Jewelers design tokens.
   Owned by the "Platine homepage + core" thread. Every page and section imports this file and
   uses these custom properties only; do not hard-code colors, fonts or easing elsewhere.
   Layout concept: Tiffany-like pearl ground, square-cornered media, charcoal type,
   one steel-blue brand field per page, generous editorial spacing. Light theme only (client decision). */

:root {
  color-scheme: light;

  /* Brand colors, sampled from the logo */
  --nj-charcoal: #3F3F48;      /* logo "NEWTON'S" ink; running text */
  --nj-ink: #2E2E36;           /* solid buttons, largest headlines */
  --nj-steel: #9AB1C3;         /* logo diamond + "JEWELERS"; decorative only, never small text */
  --nj-steel-deep: #52697B;    /* steel for small text, links, focus (5.2:1 on --nj-pearl) */
  --nj-steel-ink: #34495A;     /* text placed on a --nj-steel field */

  /* Neutrals, biased cool toward the steel */
  --nj-white: #FFFFFF;
  --nj-pearl: #F7F9FA;         /* page ground */
  --nj-mist: #EEF3F6;          /* alternate section ground */
  --nj-frost: #E3EBF0;         /* panels, placeholders */
  --nj-platinum: #D9E0E6;      /* deeper panel, rail track */
  --nj-line: #DCE3E8;          /* hairline, used sparingly */
  --nj-text-2: #55555F;        /* secondary text (6.7:1) */
  --nj-muted: #6A6A73;         /* captions (4.9:1 on pearl) */

  /* Status (forms, cart) */
  --nj-ok: #2F6B4F;
  --nj-error: #9B2C2C;

  /* Type: matched to the logo (EB Garamond for the serif caps, Lato Light for "JEWELERS") */
  --nj-font-display: "EB Garamond", "Adobe Garamond Pro", Garamond, "Iowan Old Style", Georgia, serif;
  --nj-font-text: "Lato", "Helvetica Neue", "Segoe UI", Arial, sans-serif;

  /* Type scale (fluid). Five sizes do the visible work. */
  --nj-size-caption: 0.75rem;                                   /* 12px labels, tracked caps */
  --nj-size-small: 0.875rem;                                    /* 14px notes */
  --nj-size-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);       /* 16 to 18px */
  --nj-size-lead: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);   /* intro paragraphs */
  --nj-size-h3: clamp(1.5rem, 1.3rem + 0.9vw, 2.125rem);
  --nj-size-h2: clamp(2.375rem, 1.6rem + 3.2vw, 4.5rem);
  --nj-size-h1: clamp(2.75rem, 1.6rem + 4.8vw, 6.25rem);
  --nj-size-statement: clamp(1.75rem, 1.2rem + 2.2vw, 3.25rem);
  --nj-tracking-caps: 0.22em;
  --nj-tracking-display: -0.012em;
  --nj-leading-display: 1.02;
  --nj-leading-body: 1.65;
  --nj-measure: 62ch;

  /* Space */
  --nj-gutter: clamp(16px, 4vw, 64px);
  --nj-max: 1440px;
  --nj-section: clamp(88px, 11vw, 196px);
  --nj-gap-1: 8px;
  --nj-gap-2: 16px;
  --nj-gap-3: 24px;
  --nj-gap-4: 40px;
  --nj-gap-5: 64px;
  --nj-gap-6: 104px;

  /* Shape: square media and buttons (Tiffany-like). Pills only for chips/swatches. */
  --nj-radius: 0px;
  --nj-radius-pill: 999px;

  /* Elevation: only things that truly float */
  --nj-shadow-float: 0 24px 60px -28px rgba(46, 46, 54, 0.28);

  /* Motion */
  --nj-ease: cubic-bezier(0.22, 1, 0.36, 1);       /* entrances */
  --nj-ease-lux: cubic-bezier(0.32, 0.72, 0, 1);   /* drawers, menus */
  --nj-ease-press: cubic-bezier(0.4, 0, 0.2, 1);
  --nj-dur-fast: 220ms;
  --nj-dur: 520ms;
  --nj-dur-slow: 1100ms;

  /* Layers */
  --nj-z-header: 50;
  --nj-z-menu: 60;
  --nj-z-overlay: 70;

  /* Header height, kept in sync by shell.js */
  --nj-header-h: 84px;
}