/* Lymlight Design System — Tokens
   Light primary, dark secondary. Two variants: .ink (default) and .aurora.
   Scales are consistent; only hue shifts between variants. */

:root, .ink {
  /* Neutrals — warm-leaning slate */
  --ll-bg:          #fafafa;
  --ll-surface:     #ffffff;
  --ll-surface-2:   #f5f5f4;
  --ll-surface-3:   #eeeeec;
  --ll-border:      #e4e4e1;
  --ll-border-2:    #d4d4d0;
  --ll-ink:         #0e1116;
  --ll-ink-2:       #2b2f36;
  --ll-muted:       #5b6270;
  --ll-muted-2:     #8a909b;
  --ll-hair:        #e9e9e6;

  /* Brand — Arctic Meds logo navy */
  --ll-brand:       #044485;
  --ll-brand-2:     #0a2f5e;
  --ll-brand-weak:  #e7f0f9;
  --ll-brand-ink:   #ffffff;

  /* Signal — Arctic Meds logo amber */
  --ll-accent:      #fb9f08;
  --ll-accent-weak: #fdf0d4;
  --ll-accent-ink:  #2a1c00;

  /* Semantic */
  --ll-success:     #1f7a4d;
  --ll-success-weak:#e4f2ea;
  --ll-warning:     #a5641b;
  --ll-warning-weak:#f7efdc;
  --ll-danger:      #a02424;
  --ll-danger-weak: #f7e5e3;
  --ll-info:        #2858b8;
  --ll-info-weak:   #e5ecfb;

  /* Radii */
  --ll-r-1: 4px;  --ll-r-2: 6px;  --ll-r-3: 8px;  --ll-r-4: 12px; --ll-r-5: 16px;

  /* Shadows — soft and clinical */
  --ll-sh-1: 0 1px 2px rgba(15,22,36,.06), 0 0 0 1px rgba(15,22,36,.04);
  --ll-sh-2: 0 4px 10px rgba(15,22,36,.07), 0 0 0 1px rgba(15,22,36,.05);
  --ll-sh-3: 0 12px 28px rgba(15,22,36,.10), 0 0 0 1px rgba(15,22,36,.05);
  --ll-sh-pop: 0 16px 40px rgba(15,22,36,.18);

  /* Type */
  --ll-font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ll-font-serif: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  --ll-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Spacing (4px base) */
  --ll-s-1: 4px; --ll-s-2: 8px; --ll-s-3: 12px; --ll-s-4: 16px;
  --ll-s-5: 20px; --ll-s-6: 24px; --ll-s-7: 32px; --ll-s-8: 40px;
  --ll-s-9: 48px; --ll-s-10: 64px;
}

/* Variant B — Aurora (cosmic but still professional) */
.aurora {
  --ll-brand:       #2a2450;     /* deep indigo ink */
  --ll-brand-2:     #3a3470;
  --ll-brand-weak:  #efecf8;
  --ll-accent:      #5b4de6;     /* cosmic violet signal */
  --ll-accent-weak: #ece9fb;
}

/* Dark mode — applied via .dark */
.dark, .ink.dark, .aurora.dark {
  --ll-bg:          #0b0d12;
  --ll-surface:     #111318;
  --ll-surface-2:   #171a20;
  --ll-surface-3:   #1e2129;
  --ll-border:      #262a33;
  --ll-border-2:    #323742;
  --ll-ink:         #f3f4f6;
  --ll-ink-2:       #d7dae0;
  --ll-muted:       #9097a3;
  --ll-muted-2:     #6b7180;
  --ll-hair:        #1f232b;
  --ll-brand-weak:  #17223a;
  --ll-accent-weak: #0f2a30;
  --ll-success-weak:#0f2519;
  --ll-warning-weak:#2a1f10;
  --ll-danger-weak: #2a1414;
  --ll-info-weak:   #111a33;

  --ll-sh-1: 0 1px 2px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.04);
  --ll-sh-2: 0 4px 14px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.05);
  --ll-sh-3: 0 18px 40px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06);
}
.aurora.dark { --ll-brand: #6a5ef0; --ll-brand-2: #8479f4; --ll-accent: #8a7dff; }
.ink.dark    { --ll-brand: #4b84d6; --ll-brand-2: #6ea0e8; }

/* Base type ramp */
.ll { font-family: var(--ll-font-sans); color: var(--ll-ink); background: var(--ll-bg);
      font-feature-settings: "ss01","cv11","tnum" 0; -webkit-font-smoothing: antialiased; }
.ll-display  { font-family: var(--ll-font-serif); font-weight: 400; letter-spacing: -0.02em; }
.ll-num      { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.ll-mono     { font-family: var(--ll-font-mono); }
.ll-eyebrow  { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ll-muted); font-weight: 500; }