/* =====================================================================
   Raryum Design System — Colors & Type
   Brand metaphor: "rare + -ium" — a rare, valuable element.
   Mood: corporate, sustainable, innovative. Dark-default.
   Palette anchor: emerald (element/sustainability) + platinum neutrals
                   + electric lime spark for action.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  /* ---------------------------------------------------------------
     NEUTRALS — warm-cool charcoal with a faint green undertone.
     Reads as "polished metal" not "blue tech".
     --------------------------------------------------------------- */
  --rar-ink-0:    #07100d;   /* page ground (deepest) */
  --rar-ink-1:    #0c1612;   /* base surface */
  --rar-ink-2:    #121d18;   /* raised surface */
  --rar-ink-3:    #1a2520;   /* card */
  --rar-ink-4:    #25322c;   /* hairline on raised */
  --rar-ink-5:    #3a4842;   /* divider strong */

  --rar-paper-0:  #f8faf6;
  --rar-paper-1:  #eef1eb;
  --rar-paper-2:  #dde1d9;

  /* Text on dark */
  --rar-fg-1:     #f0f4ee;   /* primary */
  --rar-fg-2:     #b6c1bb;   /* secondary */
  --rar-fg-3:     #7d877f;   /* tertiary / label */
  --rar-fg-4:     #515a54;   /* disabled */
  --rar-fg-dim:   #2a3530;   /* hairline ink */

  /* Text on light */
  --rar-fg-on-light-1: #0c1612;
  --rar-fg-on-light-2: #3a463f;
  --rar-fg-on-light-3: #687069;

  /* ---------------------------------------------------------------
     EMERALD — primary brand. Rare-earth, sustainable.
     --------------------------------------------------------------- */
  --rar-em-12:   #03110a;
  --rar-em-10:   #07301f;
  --rar-em-9:    #0b4a30;
  --rar-em-8:    #0e5c3a;   /* brand primary */
  --rar-em-7:    #14764b;
  --rar-em-6:    #1aa46b;
  --rar-em-5:    #2ebc7e;   /* primary accent on dark */
  --rar-em-4:    #4ed99a;
  --rar-em-3:    #88e8b9;
  --rar-em-2:    #b9f0d3;
  --rar-em-1:    #e3faec;

  /* ---------------------------------------------------------------
     LIME / SPARK — the energetic accent. Used for "demo", primary CTA.
     Reads as electric, slightly chemical. Use sparingly.
     --------------------------------------------------------------- */
  --rar-spark-9: #6a7d10;
  --rar-spark-7: #9bb420;
  --rar-spark-6: #b9d534;
  --rar-spark-5: #d4f24a;   /* THE spark */
  --rar-spark-3: #e6f88a;
  --rar-spark-1: #f6fbd1;

  /* ---------------------------------------------------------------
     PLATINUM — silvery cool neutrals for "element / periodic table" feel.
     Used for chip borders, metadata, secondary surfaces on light.
     --------------------------------------------------------------- */
  --rar-pt-9:    #2e3a3a;
  --rar-pt-7:    #5b6c6c;
  --rar-pt-6:    #7d8f8f;
  --rar-pt-5:    #a6b6b3;
  --rar-pt-3:    #cdd6d2;
  --rar-pt-1:    #eaeeeb;

  /* ---------------------------------------------------------------
     COPPER — warm warning / "rare metal" signal.
     --------------------------------------------------------------- */
  --rar-cu-10:   #2a1305;
  --rar-cu-7:    #93501f;
  --rar-cu-6:    #b96a2c;
  --rar-cu-5:    #d98244;   /* warning */
  --rar-cu-3:    #f0b585;

  /* ---------------------------------------------------------------
     COBALT — supporting cool accent, for charts / second-layer info.
     --------------------------------------------------------------- */
  --rar-co-10:   #061a30;
  --rar-co-7:    #1d4f8e;
  --rar-co-6:    #3a72b5;
  --rar-co-5:    #6196d4;
  --rar-co-3:    #a8c4e6;

  /* Semantic */
  --rar-success:    var(--rar-em-5);
  --rar-success-bg: var(--rar-em-10);
  --rar-warning:    var(--rar-cu-5);
  --rar-warning-bg: var(--rar-cu-10);
  --rar-danger:     #e35a5a;
  --rar-danger-bg:  #3a1313;
  --rar-info:       var(--rar-co-5);
  --rar-info-bg:    var(--rar-co-10);

  /* ---------------------------------------------------------------
     SEMANTIC SHORTCUTS (dark default)
     --------------------------------------------------------------- */
  --bg:           var(--rar-ink-0);
  --bg-raised:    var(--rar-ink-1);
  --bg-card:      var(--rar-ink-2);
  --bg-card-hi:   var(--rar-ink-3);
  --line:         var(--rar-ink-4);
  --line-strong:  var(--rar-ink-5);
  --line-soft:    color-mix(in oklab, var(--rar-ink-4) 55%, transparent);

  --fg:           var(--rar-fg-1);
  --fg-muted:     var(--rar-fg-2);
  --fg-subtle:    var(--rar-fg-3);
  --fg-disabled:  var(--rar-fg-4);

  --accent:        var(--rar-em-5);
  --accent-hover:  var(--rar-em-4);
  --accent-strong: var(--rar-em-7);
  --accent-bg:     var(--rar-em-10);
  --on-accent:     var(--rar-ink-0);

  --spark:         var(--rar-spark-5);
  --on-spark:      var(--rar-ink-0);

  /* ---------------------------------------------------------------
     RADII / SHADOW / SPACING / MOTION
     Subtle, technical. Cards are sharper (8–12px), pills only for chips.
     --------------------------------------------------------------- */
  --r-1:  4px;
  --r-2:  6px;
  --r-3:  8px;     /* default card/button */
  --r-4:  12px;
  --r-5:  16px;
  --r-6:  24px;
  --r-tile: 10px;  /* element-tile corner */
  --r-pill: 999px;

  --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;

  --shadow-1: 0 1px 0 0 rgb(255 255 255 / 0.04) inset,
              0 1px 2px rgb(0 0 0 / 0.45);
  --shadow-2: 0 1px 0 0 rgb(255 255 255 / 0.05) inset,
              0 8px 28px -10px rgb(0 0 0 / 0.6);
  --shadow-3: 0 1px 0 0 rgb(255 255 255 / 0.06) inset,
              0 32px 80px -20px rgb(0 0 0 / 0.7);
  --shadow-glow: 0 0 0 1px var(--rar-em-9),
                 0 0 32px -4px color-mix(in oklab, var(--rar-em-5) 40%, transparent);
  --shadow-spark: 0 0 0 1px color-mix(in oklab, var(--rar-spark-5) 40%, transparent),
                  0 0 24px -2px color-mix(in oklab, var(--rar-spark-5) 35%, transparent);

  /* Motion — restrained, professional. No bounces. */
  --ease-out:    cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.2, 0.4, 1);
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    420ms;
  --dur-cinema:  900ms;

  /* ---------------------------------------------------------------
     TYPE
     Plus Jakarta Sans = display + UI (clean, modern, technical)
     JetBrains Mono   = metadata, atomic numbers, code, numerics
     Instrument Serif = occasional editorial italic (quotes, accents)
     --------------------------------------------------------------- */
  --font-sans:  'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:  'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --font-serif: 'Instrument Serif', ui-serif, Georgia, serif;

  --t-xs:    12px;
  --t-sm:    13px;
  --t-base:  15px;
  --t-md:    17px;
  --t-lg:    20px;
  --t-xl:    24px;
  --t-2xl:   32px;
  --t-3xl:   44px;
  --t-4xl:   64px;
  --t-5xl:   88px;
  --t-6xl:  120px;

  --lh-tight: 1.05;
  --lh-snug:  1.18;
  --lh-base:  1.5;
  --lh-loose: 1.65;

  --track-tightest: -0.03em;
  --track-tight:    -0.018em;
  --track-normal:    0;
  --track-loose:     0.04em;
  --track-caps:      0.14em;
}

/* =====================================================================
   SEMANTIC TEXT STYLES
   ===================================================================== */

.rar-display {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(48px, 8vw, var(--t-5xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tightest);
  color: var(--fg);
  text-wrap: balance;
}

.rar-h1 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(36px, 5vw, var(--t-4xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  color: var(--fg);
  text-wrap: balance;
}

.rar-h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(28px, 3.5vw, var(--t-3xl));
  line-height: var(--lh-snug);
  letter-spacing: var(--track-tight);
  color: var(--fg);
  text-wrap: balance;
}

.rar-h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--t-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-tight);
  color: var(--fg);
}

.rar-h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--t-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-tight);
  color: var(--fg);
}

.rar-h5 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--t-lg);
  line-height: 1.3;
  letter-spacing: var(--track-tight);
  color: var(--fg);
}

.rar-lede {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-lg);
  line-height: var(--lh-loose);
  color: var(--fg-muted);
  text-wrap: pretty;
}

.rar-body, .rar-p {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-base);
  line-height: var(--lh-loose);
  color: var(--fg-muted);
  text-wrap: pretty;
}

.rar-small {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-sm);
  line-height: var(--lh-base);
  color: var(--fg-subtle);
}

.rar-eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--t-xs);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--rar-em-4);
}

.rar-meta {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  color: var(--fg-subtle);
}

.rar-code, code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: 0;
  color: var(--rar-spark-3);
  background: var(--rar-ink-2);
  padding: 1px 6px;
  border-radius: var(--r-1);
}

.rar-editorial {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(28px, 4vw, var(--t-3xl));
  line-height: var(--lh-snug);
  color: var(--fg);
}

/* =====================================================================
   GLOBAL DEFAULTS
   ===================================================================== */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: var(--bg); color: var(--fg); }
body {
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: var(--lh-loose);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1 { font: 700 var(--t-4xl)/var(--lh-tight) var(--font-sans); letter-spacing: var(--track-tight); margin: 0; }
h2 { font: 700 var(--t-3xl)/var(--lh-snug) var(--font-sans);  letter-spacing: var(--track-tight); margin: 0; }
h3 { font: 600 var(--t-2xl)/var(--lh-snug) var(--font-sans);  letter-spacing: var(--track-tight); margin: 0; }
h4 { font: 600 var(--t-xl)/var(--lh-snug) var(--font-sans);   letter-spacing: var(--track-tight); margin: 0; }
h5 { font: 600 var(--t-lg)/1.3 var(--font-sans); letter-spacing: var(--track-tight); margin: 0; }
p  { font: 400 var(--t-base)/var(--lh-loose) var(--font-sans); color: var(--fg-muted); margin: 0; }
small { font-size: var(--t-sm); color: var(--fg-subtle); }
a { color: var(--rar-em-4); text-decoration-color: color-mix(in oklab, var(--rar-em-4) 40%, transparent); text-underline-offset: 3px; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--rar-em-3); }
hr { border: 0; border-top: 1px solid var(--line); }
img, svg { display: block; max-width: 100%; }

::selection { background: color-mix(in oklab, var(--rar-em-5) 30%, transparent); color: var(--fg); }

/* Hairline divider, "periodic-table line" look */
.rar-rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong) 20%, var(--line-strong) 80%, transparent);
  border: 0;
  margin: 0;
}