/* ============================================================
   tokens.css — Nomicron design-system tokens
   ============================================================ */

:root {
  /* ── Colors: surfaces ───────────────────────────────────── */
  --color-bg:            #F6F5F2;   /* warm off-white page background   */
  --color-bg-elevated:   #FFFFFF;   /* cards, panels                    */
  --color-bg-sunken:     #ECEAE5;   /* code blocks, readonly fields     */
  --color-surface-hover: #EFEDE8;   /* hovered rows, items              */
  --color-border:        #E0DDD6;   /* default borders                  */
  --color-border-strong: #C4C0B5;   /* prominent borders                */

  /* ── Colors: text ───────────────────────────────────────── */
  --color-text:          #0F1110;
  --color-text-muted:    #4A4F4C;
  --color-text-subtle:   #7A7F7C;
  --color-text-inverse:  #FFFFFF;
  --color-heading:       #090C0A;

  /* ── Colors: links ──────────────────────────────────────── */
  --color-link:          #1B5E45;
  --color-link-hover:    #124033;
  --color-link-visited:  #4A7A65;
  --color-focus-ring:    rgba(27, 94, 69, 0.4);

  /* ── Colors: accent (forest green) ─────────────────────── */
  --color-accent:          #1B5E45;
  --color-accent-hover:    #124033;
  --color-accent-soft:     #E8F3EE;
  --color-accent-contrast: #FFFFFF;

  /* ── Colors: semantic states ────────────────────────────── */
  --color-success:        #0D5C2E;
  --color-success-soft:   #E6F4EC;
  --color-success-border: #6AB88A;

  --color-warning:        #7A4800;
  --color-warning-soft:   #FFF3DC;
  --color-warning-border: #E8A830;

  --color-danger:         #8B1A1A;
  --color-danger-soft:    #FCEAEA;
  --color-danger-border:  #D47070;

  --color-info:           #174B7A;
  --color-info-soft:      #E8EFF8;
  --color-info-border:    #6A9EC8;

  /* ── Colors: rule/proposal statuses ────────────────────── */
  --color-status-effective:  #1B5E45;
  --color-status-superseded: #5A5A78;
  --color-status-repealed:   #8B1A1A;
  --color-status-draft:      #3A5878;
  --color-status-rfc:        #7A5000;
  --color-status-queued:     #2A5A8A;
  --color-status-submitted:  #1B5E45;
  --color-status-passed:     #0D5C2E;
  --color-status-failed:     #8B1A1A;
  --color-status-adopted:    #0D5C2E;
  --color-status-withdrawn:  #6A6A78;

  /* ── Colors: diffs ──────────────────────────────────────── */
  --color-diff-ins-bg:   #E6F4EC;
  --color-diff-ins-text: #0D5C2E;
  --color-diff-del-bg:   #FCEAEA;
  --color-diff-del-text: #8B1A1A;

  /* ── Colors: environment badges ─────────────────────────── */
  --color-env-dev:  #7c3aed;
  --color-env-test: #d97706;

  /* ── Typography ─────────────────────────────────────────── */
  --font-sans:  system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-serif: ui-serif, Charter, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-mono:  ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", monospace;

  --fs-xs:      0.75rem;    /* 12px */
  --fs-sm:      0.875rem;   /* 14px */
  --fs-base:    1rem;       /* 16px */
  --fs-md:      1.125rem;   /* 18px */
  --fs-lg:      1.25rem;    /* 20px */
  --fs-xl:      1.5rem;     /* 24px */
  --fs-2xl:     1.875rem;   /* 30px */
  --fs-3xl:     2.25rem;    /* 36px */
  --fs-display: clamp(1.75rem, 3vw + 1rem, 3rem);

  --lh-tight:   1.2;
  --lh-snug:    1.35;
  --lh-normal:  1.55;
  --lh-relaxed: 1.72;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --tracking-tight:  -0.015em;
  --tracking-normal:  0em;
  --tracking-wide:    0.06em;

  --measure: 65ch;

  /* ── Spacing (4px base) ─────────────────────────────────── */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* ── Radii ──────────────────────────────────────────────── */
  --radius-sm:   3px;
  --radius-md:   6px;
  --radius-lg:   12px;
  --radius-pill: 999px;

  /* ── Shadows ────────────────────────────────────────────── */
  --shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm:    0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.03);
  --shadow-md:    0 8px 24px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
  --shadow-focus: 0 0 0 3px var(--color-focus-ring);

  /* ── Z-index ────────────────────────────────────────────── */
  --z-base:     0;
  --z-sticky:   100;
  --z-dropdown: 200;
  --z-modal:    500;
  --z-toast:    700;

  /* ── Motion ─────────────────────────────────────────────── */
  --dur-fast: 120ms;
  --dur-med:  220ms;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ── Dark mode overrides ────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:            #0C0E0D;
    --color-bg-elevated:   #131714;
    --color-bg-sunken:     #090B0A;
    --color-surface-hover: #1A201C;
    --color-border:        #222926;
    --color-border-strong: #344039;

    --color-text:          #E5E8E3;
    --color-text-muted:    #94A097;
    --color-text-subtle:   #617068;
    --color-text-inverse:  #0C0E0D;
    --color-heading:       #EDF0EA;

    --color-link:          #4DC49A;
    --color-link-hover:    #62D0A8;
    --color-link-visited:  #6ABFA0;
    --color-focus-ring:    rgba(77, 196, 154, 0.45);

    --color-accent:          #4DC49A;
    --color-accent-hover:    #62D0A8;
    --color-accent-soft:     #0E2A20;
    --color-accent-contrast: #0C0E0D;

    --color-success:        #4DC49A;
    --color-success-soft:   #0C2418;
    --color-success-border: #285A40;

    --color-warning:        #E8A830;
    --color-warning-soft:   #291E06;
    --color-warning-border: #6B4B10;

    --color-danger:         #E07070;
    --color-danger-soft:    #280E0E;
    --color-danger-border:  #6B2828;

    --color-info:           #6AA8D8;
    --color-info-soft:      #0E1E2E;
    --color-info-border:    #2A4A6B;

    --color-status-effective:  #4DC49A;
    --color-status-superseded: #8888A8;
    --color-status-repealed:   #E07070;
    --color-status-draft:      #6A9AC4;
    --color-status-rfc:        #D09840;
    --color-status-queued:     #5A90C8;
    --color-status-submitted:  #4DC49A;
    --color-status-passed:     #4DC49A;
    --color-status-failed:     #E07070;
    --color-status-adopted:    #4DC49A;
    --color-status-withdrawn:  #7A7A8A;

    --color-diff-ins-bg:   #0C2418;
    --color-diff-ins-text: #4DC49A;
    --color-diff-del-bg:   #280E0E;
    --color-diff-del-text: #E07070;

    --color-env-dev:  #a78bfa;
    --color-env-test: #fbbf24;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.28), 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.22);
  }
}