/* ============================================================
   JUJINA COSMETICS — Colors & Type
   Tokens follow the official Jujina brand guide.
   Import this file first.
   ============================================================ */

/* -- Brand typography: FC Minimal (primary, all weights/styles)
      with Poppins as the Latin secondary. Locally hosted. -- */
@font-face {
  font-family: 'FC Minimal';
  src: url('fonts/FC_Minimal_Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'FC Minimal';
  src: url('fonts/FC_Minimal_Italic.otf') format('opentype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'FC Minimal';
  src: url('fonts/FC_Minimal_Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'FC Minimal';
  src: url('fonts/FC_Minimal_Bold_Italic.ttf') format('truetype');
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Light.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  /* ============================================================
     COLOR — Brand guide spec
     Delft Blue + Isabelline + White + Darkest Hour.
     The brand intentionally restricts itself to these four.
     Soft "warm sand" tones below are PHOTOGRAPHIC-ONLY accents
     derived from product photography; do not use as UI colors.
     ============================================================ */

  --jj-delft-blue:   #223963;  /* Primary — Pantone Blue 302U   */
  --jj-isabelline:   #EFEAE8;  /* Surface — Pantone Beige 4755U */
  --jj-white:        #FFFFFF;  /* */
  --jj-darkest-hour: #202021;  /* Body text / dark contrast     */

  /* Aliases (semantic) */
  --jj-fg:           var(--jj-darkest-hour);
  --jj-fg-muted:     #5A5A5C;
  --jj-bg:           var(--jj-isabelline);
  --jj-bg-elevated:  var(--jj-white);
  --jj-accent:       var(--jj-delft-blue);
  --jj-on-accent:    var(--jj-isabelline);

  /* Subtle tints derived by mixing brand colors with white.
     Use only for surfaces / dividers, never as accents. */
  --jj-delft-tint-10: #E9EBF0;   /* 10% delft on white */
  --jj-delft-tint-20: #D3D7E0;
  --jj-delft-tint-40: #A7AFC1;
  --jj-isabelline-darker: #DCD4CF; /* divider on isabelline */

  /* Photographic-only accent tones (skin/sand swatches seen in
     product photography — for SHADE SWATCHES only, not UI). */
  --jj-shade-01: #F5DEC4;
  --jj-shade-13: #EDC9A6;
  --jj-shade-19: #E5B587;
  --jj-shade-23: #D9A47B;
  --jj-shade-27: #C28A60;
  --jj-shade-31: #A87049;

  /* Functional — for ecommerce states */
  --jj-success: #2E7D5B;
  --jj-danger:  #B5384A;
  --jj-warning: #D29B2B;

  /* ============================================================
     TYPE — FC Minimal (substituted with Anuphan)
     "FC Minimal is the only type family the brand uses."
     Weights in use: Regular (400), Bold (700). Italic + Bold-Italic
     reserved for the brand quote pattern.
     ============================================================ */
  --jj-font-display: 'FC Minimal', 'Poppins', system-ui, sans-serif;
  --jj-font-body:    'FC Minimal', 'Poppins', system-ui, sans-serif;
  --jj-font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;

  --jj-w-regular: 400;
  --jj-w-medium:  500;
  --jj-w-semi:    600;
  --jj-w-bold:    700;

  /* Type scale (semantic) */
  --jj-display:    700 88px/0.95 var(--jj-font-display); /* "TYPOGRAPHY", "BANNER", "MOCK UP" */
  --jj-h1:         700 56px/1.05 var(--jj-font-display);
  --jj-h2:         700 40px/1.1  var(--jj-font-display);
  --jj-h3:         700 30px/1.2  var(--jj-font-display);
  --jj-h4:         700 22px/1.25 var(--jj-font-display);
  --jj-eyebrow:    700 11px/1.2  var(--jj-font-display); /* uppercase */
  --jj-body:       400 16px/1.55 var(--jj-font-body);
  --jj-body-lg:    400 20px/1.45 var(--jj-font-body);
  --jj-body-sm:    400 14px/1.5  var(--jj-font-body);
  --jj-caption:    500 12px/1.4  var(--jj-font-body);
  --jj-button:     700 14px/1    var(--jj-font-display);
  --jj-quote:      700 italic 30px/1.2 var(--jj-font-display); /* the bold-italic quote pattern from brand guide */

  /* ============================================================
     SPACING (4pt)
     ============================================================ */
  --jj-s-1: 4px;
  --jj-s-2: 8px;
  --jj-s-3: 12px;
  --jj-s-4: 16px;
  --jj-s-5: 24px;
  --jj-s-6: 32px;
  --jj-s-7: 48px;
  --jj-s-8: 64px;
  --jj-s-9: 96px;
  --jj-s-10: 128px;

  /* ============================================================
     RADII — restrained. The brand favours hard rectangles for
     marketing tiles and the logo's capsule curvature for
     navigation pills. No medium "card" radius.
     ============================================================ */
  --jj-r-none: 0px;
  --jj-r-sm:   4px;     /* small inputs, micro chips           */
  --jj-r-card: 8px;     /* product cards, marketing tiles       */
  --jj-r-pill: 999px;   /* buttons, OFFICIAL STORE, badges      */
  --jj-r-capsule: 28px; /* echo of logo capsule for hero cards  */

  /* ============================================================
     SHADOWS — subtle, blue-tinted.
     ============================================================ */
  --jj-shadow-1: 0 1px 2px rgba(34,57,99,.06), 0 1px 1px rgba(34,57,99,.04);
  --jj-shadow-2: 0 4px 12px rgba(34,57,99,.08), 0 2px 4px rgba(34,57,99,.04);
  --jj-shadow-3: 0 14px 32px rgba(34,57,99,.12), 0 4px 8px rgba(34,57,99,.06);

  /* ============================================================
     BORDERS
     ============================================================ */
  --jj-border:        1px solid var(--jj-isabelline-darker);
  --jj-border-strong: 1.5px solid var(--jj-delft-blue);
}

/* ============================================================
   SEMANTIC ELEMENTS
   ============================================================ */

html, body { background: var(--jj-isabelline); color: var(--jj-fg); font: var(--jj-body); -webkit-font-smoothing: antialiased; }

h1, .jj-h1 { font: var(--jj-h1);  color: var(--jj-delft-blue); margin: 0 0 var(--jj-s-4); letter-spacing: -0.01em; }
h2, .jj-h2 { font: var(--jj-h2);  color: var(--jj-delft-blue); margin: 0 0 var(--jj-s-3); letter-spacing: -0.005em; }
h3, .jj-h3 { font: var(--jj-h3);  color: var(--jj-delft-blue); margin: 0 0 var(--jj-s-2); }
h4, .jj-h4 { font: var(--jj-h4);  color: var(--jj-delft-blue); margin: 0 0 var(--jj-s-2); }
.jj-display { font: var(--jj-display); color: var(--jj-delft-blue); letter-spacing: -0.02em; text-transform: uppercase; }
.jj-eyebrow { font: var(--jj-eyebrow); color: var(--jj-delft-blue); text-transform: uppercase; letter-spacing: .14em; white-space: nowrap; }
.jj-quote   { font: var(--jj-quote); color: var(--jj-isabelline); }
.jj-quote::before { content: "\201C"; }
.jj-quote::after  { content: "\201D"; }

p, .jj-body { font: var(--jj-body); color: var(--jj-fg); }
small, .jj-caption { font: var(--jj-caption); color: var(--jj-fg-muted); }
code, kbd, .jj-mono { font-family: var(--jj-font-mono); }

a { color: var(--jj-delft-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ============================================================
   INVERSE CONTEXT — drop on any section that uses Delft Blue
   (or any dark) as a background. Re-routes element selectors
   (p, h1–h4, .jj-eyebrow, .jj-quote, .jj-body, small) to use
   Isabelline so dark element defaults never end up unreadable
   on a dark surface.
   ============================================================ */
.jj-on-dark,
.jj-on-dark p,
.jj-on-dark h1, .jj-on-dark h2, .jj-on-dark h3, .jj-on-dark h4,
.jj-on-dark .jj-h1, .jj-on-dark .jj-h2, .jj-on-dark .jj-h3, .jj-on-dark .jj-h4,
.jj-on-dark .jj-display, .jj-on-dark .jj-eyebrow, .jj-on-dark .jj-quote,
.jj-on-dark .jj-body, .jj-on-dark small, .jj-on-dark .jj-caption,
.jj-on-dark a { color: var(--jj-isabelline); }