/* =========================================================
   Pascal AI Labs — Design Tokens
   Ported from _ds/pascal-ai-labs-design-system/colors_and_type.css
   ========================================================= */

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

:root {
  /* ----- Brand ------------------------------------------- */
  --pascal-green:        #1FA37A;
  --pascal-green-600:    #189174;
  --pascal-green-700:    #137A61;
  --pascal-green-300:    #7BC9AE;
  --pascal-green-100:    #E5F4EE;
  --pascal-green-050:    #F2FAF6;

  --pascal-plum:         #2A1F35;
  --pascal-plum-900:     #1E1528;
  --pascal-plum-600:     #3D2E4C;

  --pascal-blue:         #5B8DEF;
  --pascal-blue-soft:    #8BA8E8;

  --pascal-amber:         #C98A1F;
  --pascal-amber-bg:      #FBF1DD;
  --pascal-amber-border:  #EFD199;

  --pascal-red:          #D24A4A;
  --pascal-red-bg:       #FCEBEA;
  --pascal-red-border:   #F2C6C3;

  --pascal-up:           #1FA37A;
  --pascal-down:         #D24A4A;

  /* ----- Neutrals ------------------------------------------ */
  --bg-page:             #F7F8F7;
  --bg-surface:          #FFFFFF;
  --bg-subtle:           #F2F3F2;
  --bg-sunken:           #ECEEEC;

  --border-soft:         #E7E8E7;
  --border-default:      #D9DBD9;
  --border-strong:       #B9BCB9;

  --fg-1:                #1B2320;
  --fg-2:                #495049;
  --fg-3:                #7A807A;
  --fg-4:                #A3A7A3;
  --fg-inverse:          #FFFFFF;

  /* ----- Type families ----------------------------------- */
  --font-display: "Nunito", "Nunito Sans", system-ui, -apple-system, sans-serif;
  --font-body:    "Nunito Sans", "Nunito", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ----- Type scale -------------------------------------- */
  --fs-display-1: 40px;
  --fs-display-2: 32px;
  --fs-h1:        24px;
  --fs-h2:        20px;
  --fs-h3:        17px;
  --fs-body:      14px;
  --fs-body-sm:   13px;
  --fs-caption:   12px;
  --fs-micro:     11px;

  --lh-tight:     1.15;
  --lh-snug:      1.3;
  --lh-normal:    1.5;
  --lh-loose:     1.65;

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

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

  /* ----- Radii ------------------------------------------- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-pill: 999px;

  /* ----- Elevation --------------------------------------- */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(27, 35, 32, 0.04);
  --shadow-2: 0 2px 6px rgba(27, 35, 32, 0.05), 0 1px 2px rgba(27, 35, 32, 0.04);
  --shadow-3: 0 8px 20px rgba(27, 35, 32, 0.08), 0 2px 6px rgba(27, 35, 32, 0.04);
  --shadow-popover: 0 12px 28px rgba(27, 35, 32, 0.10), 0 2px 6px rgba(27, 35, 32, 0.06);

  /* ----- Motion ------------------------------------------ */
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-instant:  80ms;
  --dur-fast:    140ms;
  --dur-base:    200ms;
  --dur-slow:    320ms;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p { margin: 0; }

.h1 { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: var(--fw-bold); line-height: var(--lh-snug); color: var(--fg-1); }
.h2 { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: var(--lh-snug); color: var(--fg-1); }
.h3 { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--fw-semibold); line-height: var(--lh-snug); color: var(--fg-1); }
.body-muted { color: var(--fg-2); }
.caption { font-size: var(--fs-caption); color: var(--fg-3); }
.eyebrow { font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--fg-3); }
.code { font-family: var(--font-mono); font-size: var(--fs-body-sm); color: var(--fg-1); }