/* RiSEJAY design tokens */
/* Webfonts are enqueued by functions.php (preconnect + display=swap) — no @import here. */

:root{
  /* ── Ink (signature navy ramp) ─────────────────────────────── */
  --rj-ink-1000:#040514; --rj-ink-950:#080A22; --rj-ink-900:#0F1239; /* brand */
  --rj-ink-800:#171B45; --rj-ink-700:#222752; --rj-ink-600:#313766; --rj-ink-500:#454C7E;

  /* ── Gold (refined, understated — never flashy) ─────────────── */
  --rj-gold-100:#F5EEE1; --rj-gold-200:#E9DAC0; --rj-gold-300:#DCC496; /* champagne */
  --rj-gold-400:#CFAF74; --rj-gold-500:#C6A15B; /* luxury gold, primary accent */
  --rj-gold-600:#A9853F; --rj-gold-700:#8A6A31; /* deep bronze */ --rj-gold-800:#6B5227;

  /* ── Neutrals (light side) ─────────────────────────────────── */
  --rj-paper:#FBFAF8;      /* off white */
  --rj-paper-2:#F4F2ED;    /* very light grey */
  --rj-grey-200:#E4E2DB; --rj-grey-300:#CFCEC9; --rj-grey-400:#A9A9B4;
  --rj-grey-500:#85869A;   /* neutral grey */
  --rj-grey-600:#5F6178; --rj-grey-700:#40425A;

  /* ── Semantic hues ─────────────────────────────────────────── */
  --rj-success-500:#2F8F6B; --rj-success-300:#7FC0A6; --rj-success-950:#0C2A21;
  --rj-warning-500:#C08A2E; --rj-warning-300:#E0BE7B; --rj-warning-950:#2E2210;
  --rj-error-500:#B84A3F;   --rj-error-300:#E2938A;   --rj-error-950:#2E1310;
  --rj-info-500:#4B7AA8;    --rj-info-300:#9BBDD8;    --rj-info-950:#0E1E2C;

  /* ── Alpha utilities ───────────────────────────────────────── */
  --rj-white-04:rgba(255,255,255,.04); --rj-white-06:rgba(255,255,255,.06);
  --rj-white-08:rgba(255,255,255,.08); --rj-white-12:rgba(255,255,255,.12);
  --rj-white-16:rgba(255,255,255,.16); --rj-white-64:rgba(255,255,255,.64);
  --rj-ink-08:rgba(15,18,57,.08); --rj-ink-12:rgba(15,18,57,.12); --rj-ink-64:rgba(15,18,57,.64);
  --rj-gold-12:rgba(198,161,91,.12); --rj-gold-24:rgba(198,161,91,.24); --rj-gold-40:rgba(198,161,91,.40);

  /* ── Gradients (subtle, atmospheric — never decorative colour washes) ── */
  --rj-grad-page:radial-gradient(130% 90% at 50% -20%,#171B45 0%,#0F1239 42%,#080A22 100%); /* @kind other */
  --rj-grad-band:linear-gradient(180deg,#141851 0%,#0F1239 100%); /* @kind other */
  --rj-grad-veil:linear-gradient(180deg,rgba(8,10,34,0) 0%,rgba(8,10,34,.72) 62%,#080A22 100%); /* @kind other */
  --rj-grad-card:linear-gradient(158deg,rgba(255,255,255,.055) 0%,rgba(255,255,255,.014) 62%,rgba(255,255,255,0) 100%); /* @kind other */
  --rj-grad-gold:linear-gradient(96deg,#DCC496 0%,#C6A15B 46%,#8A6A31 100%); /* @kind other */
  --rj-grad-rule:linear-gradient(90deg,rgba(198,161,91,0) 0%,rgba(198,161,91,.55) 50%,rgba(198,161,91,0) 100%); /* @kind other */
}

:root{
  --rj-font-display:"Jost","Helvetica Neue",sans-serif;
  --rj-font-body:"Manrope","Helvetica Neue",sans-serif;
  --rj-font-serif:"Cormorant Garamond",Georgia,serif;
  --rj-font-mono:ui-monospace,monospace;

  --rj-weight-light:300; /* @kind other */ --rj-weight-regular:400; /* @kind other */ --rj-weight-medium:500; /* @kind other */
  --rj-weight-semibold:600; /* @kind other */ --rj-weight-bold:700; /* @kind other */

  /* size · line-height · tracking, per role */
  --rj-display-size:clamp(3.5rem,6vw,6rem); --rj-display-lh:1.02; /* @kind other */ --rj-display-ls:-.024em; /* @kind other */
  --rj-h1-size:clamp(2.5rem,4vw,3.5rem);    --rj-h1-lh:1.06; /* @kind other */  --rj-h1-ls:-.02em; /* @kind other */
  --rj-h2-size:clamp(2rem,3vw,2.5rem);      --rj-h2-lh:1.14; /* @kind other */  --rj-h2-ls:-.016em; /* @kind other */
  --rj-h3-size:2rem;                        --rj-h3-lh:1.22; /* @kind other */  --rj-h3-ls:-.012em; /* @kind other */
  --rj-h4-size:1.5rem;                      --rj-h4-lh:1.32; /* @kind other */  --rj-h4-ls:-.006em; /* @kind other */
  --rj-h5-size:1.25rem;                     --rj-h5-lh:1.4; /* @kind other */   --rj-h5-ls:0em; /* @kind other */
  --rj-h6-size:1.0625rem;                   --rj-h6-lh:1.46; /* @kind other */  --rj-h6-ls:.004em; /* @kind other */
  --rj-body-lg-size:1.1875rem;              --rj-body-lg-lh:1.66; /* @kind other */ --rj-body-lg-ls:0em; /* @kind other */
  --rj-body-size:1.0625rem;                 --rj-body-lh:1.7; /* @kind other */  --rj-body-ls:0em; /* @kind other */
  --rj-small-size:.9375rem;                 --rj-small-lh:1.6; /* @kind other */ --rj-small-ls:.002em; /* @kind other */
  --rj-caption-size:.8125rem;               --rj-caption-lh:1.5; /* @kind other */ --rj-caption-ls:.01em; /* @kind other */
  --rj-button-size:.875rem;                 --rj-button-lh:1; /* @kind other */  --rj-button-ls:.1em; /* @kind other */
  --rj-label-size:.8125rem;                 --rj-label-lh:1.4; /* @kind other */ --rj-label-ls:.02em; /* @kind other */
  --rj-overline-size:.75rem;                --rj-overline-lh:1; /* @kind other */ --rj-overline-ls:.24em; /* @kind other */
  --rj-quote-size:clamp(1.75rem,2.6vw,2.5rem); --rj-quote-lh:1.28; /* @kind other */ --rj-quote-ls:-.01em; /* @kind other */
}

:root{
  --rj-space-0:0; --rj-space-4:4px; --rj-space-8:8px; --rj-space-12:12px; --rj-space-16:16px;
  --rj-space-24:24px; --rj-space-32:32px; --rj-space-40:40px; --rj-space-48:48px;
  --rj-space-64:64px; --rj-space-80:80px; --rj-space-96:96px; --rj-space-128:128px;
  --rj-space-160:160px; --rj-space-192:192px;

  /* vertical rhythm for page sections (responsive) */
  --rj-section-sm:clamp(48px,7vw,64px);
  --rj-section:clamp(64px,9vw,96px);
  --rj-section-lg:clamp(80px,12vw,128px);
  --rj-section-xl:clamp(96px,15vw,160px);

  /* component insets */
  --rj-pad-card:32px; --rj-pad-card-sm:24px; --rj-pad-field:14px 16px; --rj-pad-btn:0 28px;
  --rj-stack-tight:12px; --rj-stack:24px; --rj-stack-loose:48px;
}

:root{
  --rj-radius-none:0; --rj-radius-xs:2px; --rj-radius-sm:4px; --rj-radius-md:6px;
  --rj-radius-lg:10px; --rj-radius-xl:14px; --rj-radius-2xl:20px; --rj-radius-3xl:28px;
  --rj-radius-pill:999px; --rj-radius-circle:50%;
  --rj-radius-card:var(--rj-radius-xl); --rj-radius-field:var(--rj-radius-lg);
  --rj-radius-btn:var(--rj-radius-pill); --rj-radius-image:var(--rj-radius-2xl);
}

:root{
  /* Shadows on a dark canvas do the work quietly: deep, wide, low-opacity. */
  --rj-shadow-xs:0 1px 2px rgba(4,5,20,.32);
  --rj-shadow-sm:0 2px 10px -3px rgba(4,5,20,.42);
  --rj-shadow-md:0 14px 32px -14px rgba(4,5,20,.58);
  --rj-shadow-lg:0 34px 72px -28px rgba(4,5,20,.7);
  --rj-shadow-xl:0 56px 120px -40px rgba(4,5,20,.78);
  --rj-shadow-gold:0 14px 34px -16px rgba(198,161,91,.5);
  --rj-shadow-inset-top:inset 0 1px 0 rgba(255,255,255,.07);
  /* on light surfaces */
  --rj-shadow-light-sm:0 2px 8px -3px rgba(15,18,57,.1);
  --rj-shadow-light-md:0 18px 40px -22px rgba(15,18,57,.22);

  --rj-border-hairline:1px solid var(--rj-white-08);
  --rj-border-strong:1px solid var(--rj-white-16);
  --rj-border-gold:1px solid var(--rj-gold-24);
  --rj-border-light:1px solid var(--rj-grey-200);
  --rj-border-width-hair:1px; /* @kind other */ --rj-border-width-thick:2px; /* @kind other */

  --rj-opacity-disabled:.38; /* @kind other */ --rj-opacity-muted:.64; /* @kind other */ --rj-opacity-subtle:.48; /* @kind other */
  --rj-opacity-hover:.08; /* @kind other */ --rj-opacity-press:.16; /* @kind other */ --rj-opacity-scrim:.72; /* @kind other */

  --rj-blur-sm:8px; /* @kind other */ --rj-blur-md:18px; /* @kind other */ --rj-blur-lg:40px; /* @kind other */
  --rj-glass:saturate(140%) blur(18px); /* @kind other */
}

:root{
  --rj-dur-instant:100ms; /* @kind other */ --rj-dur-fast:160ms; /* @kind other */ --rj-dur-base:240ms; /* @kind other */
  --rj-dur-slow:400ms; /* @kind other */ --rj-dur-slower:640ms; /* @kind other */ --rj-dur-reveal:800ms; /* @kind other */
  --rj-ease-standard:cubic-bezier(.2,.6,.2,1); /* @kind other */
  --rj-ease-entrance:cubic-bezier(.16,1,.3,1); /* @kind other */
  --rj-ease-exit:cubic-bezier(.4,0,1,1); /* @kind other */
  --rj-ease-linear:linear; /* @kind other */
  --rj-transition-base:all var(--rj-dur-base) var(--rj-ease-standard); /* @kind other */
  --rj-transition-colour:color var(--rj-dur-fast) var(--rj-ease-standard),background-color var(--rj-dur-fast) var(--rj-ease-standard),border-color var(--rj-dur-fast) var(--rj-ease-standard); /* @kind other */
  --rj-reveal-distance:16px; /* @kind other */ --rj-reveal-stagger:80ms; /* @kind other */
  --rj-lift:-2px; /* @kind other */ --rj-press-scale:.985; /* @kind other */
}

:root{
  /* Breakpoints (documentation tokens — media queries use the literals) */
  --rj-bp-sm:480px; /* @kind other */ --rj-bp-md:768px; /* @kind other */ --rj-bp-lg:1024px; /* @kind other */ --rj-bp-xl:1280px; /* @kind other */ --rj-bp-2xl:1536px; /* @kind other */

  --rj-container-max:1280px; --rj-container-narrow:880px; --rj-container-wide:1512px;
  --rj-gutter:16px; --rj-gutter-md:24px; --rj-gutter-lg:32px;
  --rj-margin:24px; --rj-margin-md:40px; --rj-margin-lg:64px;
  --rj-cols:12; /* @kind other */ --rj-cols-md:8; /* @kind other */ --rj-cols-sm:4; /* @kind other */
  --rj-measure:66ch; /* @kind other */ --rj-measure-tight:52ch; /* @kind other */
  --rj-nav-height:76px; /* @kind other */ --rj-nav-height-compact:64px; /* @kind other */
  --rj-z-base:0; /* @kind other */ --rj-z-raised:10; /* @kind other */ --rj-z-sticky:100; /* @kind other */ --rj-z-nav:200; /* @kind other */
  --rj-z-drawer:300; /* @kind other */ --rj-z-modal:400; /* @kind other */ --rj-z-toast:500; /* @kind other */ --rj-z-fab:600; /* @kind other */
}

/* Semantic aliases — always prefer these in components. Dark is the default theme. */
:root{
  --rj-bg-page:var(--rj-ink-900);
  --rj-bg-page-deep:var(--rj-ink-950);
  --rj-bg-surface:var(--rj-ink-800);
  --rj-bg-surface-raised:var(--rj-ink-700);
  --rj-bg-veil:var(--rj-grad-veil);
  --rj-surface-card:var(--rj-grad-card);
  --rj-surface-card-solid:var(--rj-ink-800);
  --rj-surface-inset:rgba(4,5,20,.32);
  --rj-surface-glass:rgba(15,18,57,.62);

  --rj-text-primary:var(--rj-paper);
  --rj-text-secondary:#B9BAC8;
  --rj-text-muted:var(--rj-grey-400);
  --rj-text-disabled:rgba(251,250,248,.38);
  --rj-text-accent:var(--rj-gold-400);
  --rj-text-on-gold:var(--rj-ink-900);
  --rj-text-on-light:var(--rj-ink-900);
  --rj-text-on-light-secondary:var(--rj-grey-600);

  --rj-border-subtle:var(--rj-white-08);
  --rj-border-default:var(--rj-white-12);
  --rj-border-emphasis:var(--rj-white-16);
  --rj-border-accent:var(--rj-gold-40);
  --rj-focus-ring:0 0 0 2px var(--rj-ink-900),0 0 0 4px var(--rj-gold-500); /* @kind other */

  --rj-accent:var(--rj-gold-500);
  --rj-accent-hover:var(--rj-gold-400);
  --rj-accent-press:var(--rj-gold-600);
  --rj-accent-quiet:var(--rj-gold-12);

  --rj-link:var(--rj-gold-400);
  --rj-link-hover:var(--rj-gold-300);
}
/* Light surfaces (editorial pages, documents, printed collateral) */
.rj-theme-light{
  --rj-bg-page:var(--rj-paper);
  --rj-bg-page-deep:var(--rj-paper-2);
  --rj-bg-surface:#FFFFFF;
  --rj-bg-surface-raised:#FFFFFF;
  --rj-surface-card:linear-gradient(180deg,#FFFFFF,#FFFFFF);
  --rj-surface-card-solid:#FFFFFF;
  --rj-surface-inset:var(--rj-paper-2);
  --rj-surface-glass:rgba(251,250,248,.78);
  --rj-text-primary:var(--rj-ink-900);
  --rj-text-secondary:var(--rj-grey-600);
  --rj-text-muted:var(--rj-grey-500);
  --rj-text-disabled:rgba(15,18,57,.38);
  --rj-text-accent:var(--rj-gold-700);
  --rj-border-subtle:var(--rj-ink-08);
  --rj-border-default:var(--rj-grey-200);
  --rj-border-emphasis:var(--rj-grey-300);
  --rj-focus-ring:0 0 0 2px #FFFFFF,0 0 0 4px var(--rj-gold-600); /* @kind other */
  --rj-link:var(--rj-gold-700);
  --rj-link-hover:var(--rj-ink-900);
  --rj-shadow-md:var(--rj-shadow-light-md);
  --rj-shadow-sm:var(--rj-shadow-light-sm);
  color:var(--rj-text-primary);background:var(--rj-bg-page);
}
