/* =============================================================================
   Policy Viewer — Design Tokens & Base Type
   ============================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* Green ramp */
  --green-50:  #ECF7F0;
  --green-100: #D6EEDF;
  --green-200: #B0DDC2;
  --green-300: #84C9A2;
  --green-400: #54B181;
  --green-500: #379869;
  --green-600: #2E8B6B;
  --green-700: #1F6B51;
  --green-800: #15533F;
  --green-900: #0F3D2E;

  /* Neutral / slate */
  --slate-50:  #F6F8F7;
  --slate-100: #EEF2F0;
  --slate-200: #E4EAE6;
  --slate-300: #CFD8D2;
  --slate-400: #9CA9A2;
  --slate-500: #6B7872;
  --slate-600: #4D5852;
  --slate-700: #353D38;
  --slate-800: #232826;
  --slate-900: #131614;

  /* Semantic accents */
  --info-50:    #EEF6FE;
  --info-100:   #D9EAFD;
  --info-600:   #1F6FB8;
  --info-700:   #18568E;

  --warn-50:    #FDF6E6;
  --warn-100:   #FAE9BC;
  --warn-600:   #B07A0F;
  --warn-700:   #8A5F0A;

  --danger-50:  #FCEEEE;
  --danger-100: #F8D7D7;
  --danger-600: #B2433F;
  --danger-700: #8B3431;

  /* App roles */
  --bg-app:         #F7FAF8;
  --bg-surface:     #FFFFFF;
  --bg-surface-2:   #FAFCFB;
  --bg-hover:       var(--slate-50);
  --bg-pressed:     var(--slate-100);

  --fg-1:           var(--slate-900);
  --fg-2:           var(--slate-700);
  --fg-3:           var(--slate-500);
  --fg-4:           var(--slate-400);
  --fg-inverse:     #FFFFFF;
  --fg-accent:      var(--green-700);

  --border:         var(--slate-200);
  --border-subtle:  var(--slate-100);
  --border-hover:   var(--slate-300);
  --border-focus:   var(--green-300);

  --accent:         var(--green-600);
  --accent-hover:   var(--green-700);
  --accent-pressed: var(--green-800);
  --accent-tint:    var(--green-50);
  --accent-tint-2:  var(--green-100);

  /* Type */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --fs-micro: 11px;
  --fs-xs:    12px;
  --fs-sm:    13px;
  --fs-base:  14px;
  --fs-md:    16px;
  --fs-lg:    18px;
  --fs-xl:    22px;
  --fs-2xl:   28px;

  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-body:   1.45;

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

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

  /* Spacing (4px base) */
  --space-0:  0;
  --space-1:  2px;
  --space-2:  4px;
  --space-3:  6px;
  --space-4:  8px;
  --space-5:  12px;
  --space-6:  16px;
  --space-7:  20px;
  --space-8:  24px;
  --space-9:  32px;
  --space-10: 48px;

  /* Radius */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-pill: 9999px;

  /* Shadow */
  --shadow-xs: 0 0 0 1px var(--border);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 6px 18px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 160ms;

  /* Z layers */
  --z-header:      20;
  --z-popover:     40;
  --z-modal-scrim: 50;
  --z-modal:       51;
  --z-toast:       60;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-app);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

*, *::before, *::after { box-sizing: border-box; }

.h1, h1 { font-size: var(--fs-xl); line-height: var(--lh-tight); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); margin: 0; color: var(--fg-1); }
.h2, h2 { font-size: var(--fs-lg); line-height: var(--lh-snug); font-weight: var(--weight-semibold); margin: 0; color: var(--fg-1); }
.h3, h3 { font-size: var(--fs-md); line-height: var(--lh-snug); font-weight: var(--weight-semibold); margin: 0; color: var(--fg-1); }
.body, p { font-size: var(--fs-md); line-height: var(--lh-body); margin: 0; color: var(--fg-1); }
.ui { font-size: var(--fs-base); line-height: var(--lh-snug); color: var(--fg-1); }
.ui-sm, .dense { font-size: var(--fs-sm); line-height: var(--lh-snug); color: var(--fg-1); }
.meta { font-size: var(--fs-xs); line-height: var(--lh-snug); color: var(--fg-3); }
.micro-label { font-size: var(--fs-micro); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--fg-3); }
.code, code, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; color: var(--fg-1); }

.fg-1 { color: var(--fg-1); }
.fg-2 { color: var(--fg-2); }
.fg-3 { color: var(--fg-3); }
.fg-accent { color: var(--fg-accent); }
.bg-app { background: var(--bg-app); }
.bg-surface { background: var(--bg-surface); }
.bg-tint { background: var(--accent-tint); }

::selection { background: var(--green-100); color: var(--green-900); }

:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; border-radius: var(--radius-sm); }