/* ============================================================================
 * JRNI / ANVOS Design System — colors + type tokens
 *
 * Mirrors @aperture/jrni-tokens (packages/jrni-tokens/src/styles/tokens.css)
 * and adds plain CSS class shortcuts (h1, h2, p, etc) so prototypes can use
 * the system without React.
 *
 * Source of truth: ANVOS Design System Figma (gtoB1mEniDNlpYkDnCTFBL)
 * Mirrored from voyage-aperture@main packages/jrni-tokens.
 * ============================================================================ */

:root {
  /* ─── Color ── Base ───────────────────────────────────────────────────── */
  --jrni-color-base-white: #FFFFFF;
  --jrni-color-base-black: #000000;

  /* ─── Color ── Neutral (1 darkest → 6 lightest) ───────────────────────── */
  --jrni-color-neutral-1: #333333;   /* primary text */
  --jrni-color-neutral-2: #697180;   /* body / secondary text */
  --jrni-color-neutral-3: #B5BAC6;   /* disabled, low-emphasis icons */
  --jrni-color-neutral-4: #D1D4DC;   /* borders */
  --jrni-color-neutral-5: #E6E8EC;   /* subtle dividers */
  --jrni-color-neutral-6: #F4F5F7;   /* surface canvas */

  /* ─── Color ── Primary purples ────────────────────────────────────────── */
  --jrni-color-primary-1: #5142C7;   /* brand purple — CTAs, links, focus */
  --jrni-color-primary-2: #DCCCFC;   /* hover/pressed mid-tone */
  --jrni-color-primary-3: #EDE5FE;   /* muted: selected row tint, chips */
  --jrni-color-primary-4: #F6F2FE;   /* lightest tint */

  /* ─── Color ── Semantic pairs (1 = text/primary, 2 = bg/muted) ───────── */
  --jrni-color-semantic-red-1:    #D01647;
  --jrni-color-semantic-red-2:    #FDE8EE;
  --jrni-color-semantic-green-1:  #027D47;
  --jrni-color-semantic-green-2:  #E6F4EE;
  --jrni-color-semantic-blue-1:   #2D60EB;
  --jrni-color-semantic-blue-2:   #ECF1FE;
  --jrni-color-semantic-orange-1: #916D0F;
  --jrni-color-semantic-orange-2: #FFFAED;

  /* ─── Color ── Tertiary (illustration / charts ONLY) ──────────────────── */
  --jrni-color-tertiary-light-blue: #75ADFA;
  --jrni-color-tertiary-pink:       #C18FE8;
  --jrni-color-tertiary-turquoise:  #5AC8AD;
  --jrni-color-tertiary-purple:     #8955F2;
  --jrni-color-tertiary-orange:     #EE9D4F;
  --jrni-color-tertiary-dark-blue:  #4981F2;
  --jrni-color-tertiary-red:        #F25589;
  --jrni-color-tertiary-yellow:     #F5C61E;
  --jrni-color-tertiary-green:      #87D23B;

  /* ─── Color ── Utility ────────────────────────────────────────────────── */
  --jrni-color-utility-focus: #AABFF5;

  /* ─── Color ── Semantic aliases ───────────────────────────────────────── */
  --jrni-color-text-strong:  var(--jrni-color-neutral-1);
  --jrni-color-text-body:    var(--jrni-color-neutral-2);
  /* Darker than canonical neutral-3 so it clears AA on white & on canvas */
  --jrni-color-text-soft:    #636A78;
  --jrni-color-text-on-dark: var(--jrni-color-base-white);

  --jrni-color-surface-canvas:        var(--jrni-color-neutral-6);
  --jrni-color-surface-card:          var(--jrni-color-base-white);
  --jrni-color-surface-card-soft:     #FAFAFD;
  --jrni-color-surface-border:        var(--jrni-color-neutral-5);
  --jrni-color-surface-border-strong: var(--jrni-color-neutral-4);
  --jrni-color-surface-overlay:       rgba(51, 51, 51, 0.55);

  --jrni-color-brand-primary:        var(--jrni-color-primary-1);
  --jrni-color-brand-primary-hover:  var(--jrni-color-primary-2);
  --jrni-color-brand-primary-muted:  var(--jrni-color-primary-3);
  --jrni-color-brand-on-primary:     var(--jrni-color-base-white);

  --jrni-color-status-success-bg:   var(--jrni-color-semantic-green-2);
  --jrni-color-status-success-text: var(--jrni-color-semantic-green-1);
  --jrni-color-status-warning-bg:   var(--jrni-color-semantic-orange-2);
  --jrni-color-status-warning-text: var(--jrni-color-semantic-orange-1);
  --jrni-color-status-danger-bg:    var(--jrni-color-semantic-red-2);
  --jrni-color-status-danger-text:  var(--jrni-color-semantic-red-1);
  --jrni-color-status-info-bg:      var(--jrni-color-semantic-blue-2);
  --jrni-color-status-info-text:    var(--jrni-color-semantic-blue-1);

  /* ─── Typography ──────────────────────────────────────────────────────── */
  --jrni-font-family-sans: 'DM Sans', 'Helvetica Neue', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --jrni-font-family-mono: 'JetBrains Mono', 'SF Mono', Consolas, Menlo, monospace;

  /* Role-named sizes (canonical ANVOS) */
  --jrni-font-size-L1:           12px;  /* Label */
  --jrni-font-size-H1:           14px;  /* Help text */
  --jrni-font-size-P1:           16px;  /* Body */
  --jrni-font-size-H3:           18px;  /* Standard header */
  --jrni-font-size-H2:           24px;  /* Large header */
  --jrni-font-size-H1ExtraLarge: 32px;  /* Extra large header / display */

  /* Convenience aliases */
  --jrni-font-size-xs:   var(--jrni-font-size-L1);
  --jrni-font-size-sm:   var(--jrni-font-size-H1);
  --jrni-font-size-base: var(--jrni-font-size-P1);
  --jrni-font-size-md:   var(--jrni-font-size-H3);
  --jrni-font-size-lg:   var(--jrni-font-size-H2);
  --jrni-font-size-xl:   var(--jrni-font-size-H1ExtraLarge);

  --jrni-font-weight-regular:  400;
  --jrni-font-weight-medium:   500;
  --jrni-font-weight-bold:     700;

  --jrni-line-height-default: 1.6;
  --jrni-line-height-display: 1.2;
  --jrni-letter-spacing-default: 0;

  /* ─── Spacing (4-px scale) ────────────────────────────────────────────── */
  --jrni-space-0:  0;
  --jrni-space-1:  4px;
  --jrni-space-2:  8px;
  --jrni-space-3:  12px;
  --jrni-space-4:  16px;
  --jrni-space-5:  20px;
  --jrni-space-6:  24px;
  --jrni-space-8:  32px;
  --jrni-space-10: 40px;
  --jrni-space-12: 48px;
  --jrni-space-16: 64px;
  --jrni-space-20: 80px;

  /* ─── Radius ──────────────────────────────────────────────────────────── */
  --jrni-radius-none: 0;
  --jrni-radius-sm:   4px;
  --jrni-radius-md:   8px;
  --jrni-radius-lg:   12px;
  --jrni-radius-pill: 999px;

  /* ─── Shadow ──────────────────────────────────────────────────────────── */
  --jrni-shadow-sm:          0 2px 2px 0 rgba(16, 24, 40, 0.12);
  --jrni-shadow-sm-reverse:  0 -2px 2px 0 rgba(16, 24, 40, 0.12);
  --jrni-shadow-md:          0 3px 8px 1px rgba(16, 24, 40, 0.12);
  --jrni-shadow-md-reverse:  0 -4px 8px 0 rgba(16, 24, 40, 0.12);
  --jrni-shadow-lg:          0 2px 4px 2px rgba(16, 24, 40, 0.06), 0 9px 16px 3px rgba(16, 24, 40, 0.10);
  --jrni-shadow-lg-reverse:  0 -4px 4px 0 rgba(16, 24, 40, 0.06), 0 -12px 16px 0 rgba(16, 24, 40, 0.10);
  --jrni-shadow-chrome:      0 1px 2px 0 rgba(16, 24, 40, 0.06), 0 1px 1px 0 rgba(16, 24, 40, 0.04);
  --jrni-shadow-chrome-hover: 0 2px 4px 0 rgba(16, 24, 40, 0.08), 0 1px 2px 0 rgba(16, 24, 40, 0.06);
  --jrni-shadow-card:    var(--jrni-shadow-md);
  --jrni-shadow-modal:   var(--jrni-shadow-lg);

  /* ─── Motion ──────────────────────────────────────────────────────────── */
  --jrni-motion-duration-fast:   120ms;
  --jrni-motion-duration-normal: 200ms;
  --jrni-motion-duration-slow:   400ms;
  --jrni-motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --jrni-motion-easing-decel:    cubic-bezier(0, 0, 0.2, 1);
  --jrni-motion-easing-accel:    cubic-bezier(0.4, 0, 1, 1);
}

/* ─── Body baseline ──────────────────────────────────────────────────────── */
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--jrni-font-family-sans);
  font-size:   var(--jrni-font-size-base);
  line-height: var(--jrni-line-height-default);
  color:       var(--jrni-color-text-body);
  background:  var(--jrni-color-surface-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ─── Semantic type classes ──────────────────────────────────────────────── */
/* Use `.jrni-h1`, `.jrni-h2`, … to apply the role-named ramp without React. */
.jrni-display, .jrni-h1-xl {
  font-family: var(--jrni-font-family-sans);
  font-size: var(--jrni-font-size-H1ExtraLarge);
  line-height: var(--jrni-line-height-display);
  font-weight: var(--jrni-font-weight-bold);
  color: var(--jrni-color-text-strong);
  letter-spacing: 0;
  margin: 0;
}
.jrni-h2 {
  font-family: var(--jrni-font-family-sans);
  font-size: var(--jrni-font-size-H2);
  line-height: var(--jrni-line-height-default);
  font-weight: var(--jrni-font-weight-medium);
  color: var(--jrni-color-text-strong);
  margin: 0;
}
.jrni-h3 {
  font-family: var(--jrni-font-family-sans);
  font-size: var(--jrni-font-size-H3);
  line-height: var(--jrni-line-height-default);
  font-weight: var(--jrni-font-weight-medium);
  color: var(--jrni-color-text-strong);
  margin: 0;
}
.jrni-p, .jrni-body {
  font-family: var(--jrni-font-family-sans);
  font-size: var(--jrni-font-size-P1);
  line-height: var(--jrni-line-height-default);
  font-weight: var(--jrni-font-weight-regular);
  color: var(--jrni-color-text-body);
  margin: 0;
}
.jrni-help, .jrni-small {
  font-family: var(--jrni-font-family-sans);
  font-size: var(--jrni-font-size-H1);
  line-height: var(--jrni-line-height-default);
  font-weight: var(--jrni-font-weight-regular);
  color: var(--jrni-color-text-soft);
}
.jrni-label {
  font-family: var(--jrni-font-family-sans);
  font-size: var(--jrni-font-size-L1);
  line-height: var(--jrni-line-height-default);
  font-weight: var(--jrni-font-weight-medium);
  color: var(--jrni-color-text-soft);
  letter-spacing: 0.02em;
}
.jrni-mono {
  font-family: var(--jrni-font-family-mono);
  font-size: var(--jrni-font-size-H1);
}
.jrni-strong { color: var(--jrni-color-text-strong); }
.jrni-muted  { color: var(--jrni-color-text-soft); }

a { color: var(--jrni-color-brand-primary); text-decoration: none; }
a:hover { text-decoration: underline; }