/* ==========================================================================
   R&S CREATIVES — Design Tokens (canonical source of truth)
   Palette: Black Pearl base · Burnt Orange primary · Blue Lagoon cool ·
            Lust alert · Copper warm-neutral · warm off-white paper.
   ========================================================================== */

:root {
  /* ---- Dark surfaces (Black Pearl family) ---- */
  --bp-900: #0F1C20;          /* deepest — page base behind dark sections */
  --bp-800: #1A2C30;          /* Black Pearl — primary dark surface */
  --bp-700: #243B40;          /* raised card on dark */
  --bp-600: #33525A;          /* dark hover / strong divider */

  /* ---- Hairlines on dark ---- */
  --line:   rgba(247,244,239,0.12);
  --line-2: rgba(247,244,239,0.06);

  /* ---- Accents ---- */
  --orange:     #FE7E3C;      /* PRIMARY — CTAs, links, eyebrows, active */
  --orange-600: #ED6A22;      /* hover/pressed */
  --orange-200: rgba(254,126,60,0.16);   /* tint wash */
  --orange-ink: #1A2C30;      /* text that sits ON orange */

  --teal:     #0E6873;        /* COOL accent — secondary highlights, charts */
  --teal-300: #3E8C97;        /* lighter teal for text on dark */
  --teal-200: rgba(14,104,115,0.18);

  --red:      #E4201B;        /* ALERT — live drops, urgent, "now open" only */
  --red-200:  rgba(228,32,27,0.15);

  --copper:     #61413C;      /* WARM NEUTRAL — muted surfaces, dividers */
  --copper-300: #8A655E;      /* warm muted text */

  /* ---- Light surfaces (warm paper) ---- */
  --paper:   #F7F4EF;         /* warm off-white — primary light surface */
  --paper-2: #FFFFFF;         /* pure white — cards on paper */
  --paper-3: #EFEAE1;         /* sand — alt light band */

  /* ---- Text ---- */
  --ink:        #1A2C30;      /* text on light */
  --ink-70:     rgba(26,44,48,0.70);
  --ink-50:     rgba(26,44,48,0.50);
  --on-dark:    #F7F4EF;      /* text on dark */
  --on-dark-70: rgba(247,244,239,0.72);
  --on-dark-45: rgba(247,244,239,0.45);

  /* ---- Type ---- */
  --font-en: 'Montserrat', sans-serif;     /* EN / display / numerals */
  --font-jp: 'Noto Sans JP', sans-serif;   /* JP / body */

  --fs-display: clamp(44px, 7vw, 96px);    /* hero display */
  --fs-h1:      clamp(34px, 5vw, 64px);
  --fs-h2:      clamp(26px, 3.2vw, 42px);
  --fs-h3:      clamp(19px, 1.4vw, 22px);
  --fs-lead:    clamp(17px, 1.6vw, 21px);
  --fs-body:    16px;
  --fs-small:   13px;
  --fs-eyebrow: 11px;

  --lh-tight: 1.12;
  --lh-head:  1.28;
  --lh-body:  1.8;

  --ls-display: -0.02em;
  --ls-head:    -0.01em;
  --ls-eyebrow: 0.24em;

  /* ---- Spacing (8px base) ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 160px;

  --container: 1200px;
  --section-y: clamp(72px, 10vw, 128px);
  --gutter:    clamp(24px, 5vw, 48px);

  /* ---- Radii ---- */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   16px;
  --r-lg:   24px;
  --r-pill: 999px;

  /* ---- Elevation ---- */
  --shadow-paper: 0 18px 50px rgba(26,44,48,0.10);
  --glow-orange:  0 14px 40px rgba(254,126,60,0.28);

  /* ---- Motion ---- */
  --ease:   cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur:    0.3s;

  /* ---- Atmosphere: background gradient mesh + film grain ---- */
  --bg-base: #0F1C20;
  --bg-mesh:
    radial-gradient(900px 720px at 80% 8%,   rgba(254,126,60,0.16), transparent 60%),
    radial-gradient(760px 620px at 5% 100%,  rgba(14,104,115,0.20), transparent 62%),
    radial-gradient(620px 520px at 100% 95%, rgba(97,65,60,0.16),   transparent 65%);
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --noise-opacity: 0.05;          /* grain strength over the gradient */

  /* ---- Frosted glass surfaces ---- */
  --glass:        linear-gradient(165deg, rgba(247,244,239,0.10), rgba(247,244,239,0.03));
  --glass-strong: linear-gradient(165deg, rgba(247,244,239,0.16), rgba(247,244,239,0.05));
  --glass-border: rgba(247,244,239,0.14);
  --glass-blur:   blur(20px) saturate(140%);
  --glass-shadow: 0 28px 60px rgba(0,0,0,0.45);
  --glass-inset:  inset 0 1px 0 rgba(247,244,239,0.18);   /* top highlight */
}