/* ============================================================
   Plaidly Design System — Colors & Typography tokens
   Single source of truth. Import everywhere.
   ============================================================ */

/* ---- Fonts -------------------------------------------------- */
/* SF Pro Display (Apple) is the brand display + body face.
   JetBrains Mono is the monospace face.
   Font files live in /fonts/ — paths are relative to this CSS. */

@font-face {
  font-family: 'SF Pro Display';
  src: url('fonts/SF-Pro-Display-Thin.otf') format('opentype');
  font-weight: 100; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'SF Pro Display';
  src: url('fonts/SF-Pro-Display-Ultralight.otf') format('opentype');
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'SF Pro Display';
  src: url('fonts/SF-Pro-Display-Light.otf') format('opentype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'SF Pro Display';
  src: url('fonts/SF-Pro-Display-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'SF Pro Display';
  src: url('fonts/SF-Pro-Display-RegularItalic.otf') format('opentype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'SF Pro Display';
  src: url('fonts/SF-Pro-Display-Medium.otf') format('opentype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'SF Pro Display';
  src: url('fonts/SF-Pro-Display-Semibold.otf') format('opentype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'SF Pro Display';
  src: url('fonts/SF-Pro-Display-SemiboldItalic.otf') format('opentype');
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'SF Pro Display';
  src: url('fonts/SF-Pro-Display-Bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'SF Pro Display';
  src: url('fonts/SF-Pro-Display-BoldItalic.otf') format('opentype');
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'SF Pro Display';
  src: url('fonts/SF-Pro-Display-Heavy.otf') format('opentype');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'SF Pro Display';
  src: url('fonts/SF-Pro-Display-Black.otf') format('opentype');
  font-weight: 900; font-style: normal; font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-Italic-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 800; font-style: italic; font-display: swap;
}

/* Apple Garamond — italic serif display accent (e.g. "to accept crypto") */
@font-face {
  font-family: 'Apple Garamond';
  src: url('fonts/AppleGaramond-Light.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Apple Garamond';
  src: url('fonts/AppleGaramond-LightItalic.ttf') format('truetype');
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Apple Garamond';
  src: url('fonts/AppleGaramond.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Apple Garamond';
  src: url('fonts/AppleGaramond-Italic.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Apple Garamond';
  src: url('fonts/AppleGaramond-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Apple Garamond';
  src: url('fonts/AppleGaramond-BoldItalic.ttf') format('truetype');
  font-weight: 700; font-style: italic; font-display: swap;
}

:root {
  /* ---- Brand palette (authoritative — from brand sheet 5.png) */
  --plaid-ink:    #030B1D;  /* near-black, primary text, dark surfaces  */
  --plaid-blue:   #4267FF;  /* royal blue — primary accent, CTAs       */
  --plaid-cyan:   #89FAFE;  /* mint-cyan — secondary accent, gradients */
  --plaid-white:  #FFFFFF;

  /* ---- Neutrals (derived from ink, cool-biased) -------------- */
  --n-0:   #FFFFFF;
  --n-25:  #FAFBFC;  /* page canvas */
  --n-50:  #F4F6F9;  /* card backdrop / recessed panels */
  --n-100: #E8ECF2;  /* subtle fills, code bg on light */
  --n-200: #D5DBE5;  /* hairline borders */
  --n-300: #B4BCCB;
  --n-400: #8891A4;  /* muted text on light */
  --n-500: #5E6880;
  --n-600: #3E475D;
  --n-700: #1F273C;
  --n-800: #0B1326;
  --n-900: var(--plaid-ink);

  /* ---- Semantic surfaces ------------------------------------- */
  --bg-page:      var(--n-25);
  --bg-surface:   var(--n-0);
  --bg-sunken:    var(--n-50);
  --bg-inverse:   var(--plaid-ink);
  --bg-code:      #0B1326;

  /* ---- Semantic text ----------------------------------------- */
  --fg-1:  var(--plaid-ink);   /* primary                */
  --fg-2:  var(--n-500);       /* secondary / body       */
  --fg-3:  var(--n-400);       /* tertiary / meta / muted*/
  --fg-on-inverse: #FFFFFF;
  --fg-on-inverse-muted: rgba(255,255,255,0.62);
  --fg-accent: var(--plaid-blue);

  /* ---- Border ------------------------------------------------ */
  --border-hairline: var(--n-200);
  --border-hairline-strong: var(--n-300);
  --border-on-inverse: rgba(255,255,255,0.10);

  /* ---- Status (minimal, cool-biased to stay on-brand) -------- */
  --ok-500:    #17B26A;
  --warn-500:  #F5A524;
  --error-500: #E5484D;
  --info-500:  var(--plaid-blue);

  /* ---- Gradients --------------------------------------------- */
  --grad-brand-radial: radial-gradient(120% 100% at 50% 110%, var(--plaid-cyan) 0%, #A5BBFF 32%, var(--plaid-blue) 70%, #2B44D6 100%);
  --grad-brand-linear: linear-gradient(135deg, var(--plaid-blue) 0%, var(--plaid-cyan) 100%);
  --grad-card-soft:    radial-gradient(140% 110% at 50% 120%, #C9F5FF 0%, #D5DEFF 40%, #F4F6F9 85%); /* @kind color */

  /* ---- Radii ------------------------------------------------- */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;   /* card radius (primary)      */
  --r-xl:  20px;   /* big cards, hero wraps      */
  --r-2xl: 28px;   /* page containers            */
  --r-pill: 999px;

  /* ---- Shadows (light, cool) --------------------------------- */
  --sh-0: 0 0 0 1px var(--border-hairline);
  --sh-1: 0 1px 2px rgba(3, 11, 29, 0.04), 0 0 0 1px var(--border-hairline);
  --sh-2: 0 6px 20px -8px rgba(3, 11, 29, 0.10), 0 0 0 1px var(--border-hairline);
  --sh-3: 0 20px 50px -20px rgba(3, 11, 29, 0.18), 0 0 0 1px var(--border-hairline);
  --sh-focus: 0 0 0 3px rgba(66, 103, 255, 0.25);

  /* ---- Spacing scale (4pt) ----------------------------------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  /* ---- Type families ---------------------------------------- */
  --font-display: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body:    'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif:   'Apple Garamond', 'Times New Roman', serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, Monaco, Consolas, monospace;

  /* ---- Type scale (values, not selectors) -------------------- */
  /* Used for desktop. Mobile scales down roughly 0.8x.          */
  --t-display-size: 72px;
  --t-display-lh:   1.02;    /* @kind font */
  --t-display-tr:   -0.035em; /* @kind font */

  --t-h1-size: 56px;
  --t-h1-lh:   1.06;        /* @kind font */
  --t-h1-tr:   -0.03em;     /* @kind font */

  --t-h2-size: 40px;
  --t-h2-lh:   1.1;         /* @kind font */
  --t-h2-tr:   -0.025em;    /* @kind font */

  --t-h3-size: 28px;
  --t-h3-lh:   1.2;         /* @kind font */
  --t-h3-tr:   -0.02em;     /* @kind font */

  --t-h4-size: 20px;
  --t-h4-lh:   1.3;         /* @kind font */
  --t-h4-tr:   -0.01em;     /* @kind font */

  --t-body-size: 16px;
  --t-body-lh:   1.55;      /* @kind font */

  --t-small-size: 14px;
  --t-small-lh:   1.5;      /* @kind font */

  --t-micro-size: 12px;
  --t-micro-lh:   1.4;      /* @kind font */
  --t-micro-tr:   0.02em;   /* @kind font */

  --t-mono-size: 13px;
  --t-mono-lh:   1.6;       /* @kind font */

  /* ---- Motion ----------------------------------------------- */
  --ease-out:    cubic-bezier(0.2, 0.7, 0.2, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.6, 0, 0.2, 1);   /* @kind other */
  --dur-fast: 160ms; /* @kind other */
  --dur-med:  260ms; /* @kind other */
  --dur-slow: 420ms; /* @kind other */
}

/* ============================================================
   Semantic element styles — opt-in via .ds- prefix so this file
   can be loaded into any page without hijacking defaults.
   ============================================================ */

.ds-body {
  font-family: var(--font-body);
  font-size: var(--t-body-size);
  line-height: var(--t-body-lh);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11"; /* SF-style alt digits if available */
}

.ds-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-display-size);
  line-height: var(--t-display-lh);
  letter-spacing: var(--t-display-tr);
  color: var(--fg-1);
}

.ds-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h1-size);
  line-height: var(--t-h1-lh);
  letter-spacing: var(--t-h1-tr);
  color: var(--fg-1);
}

.ds-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h2-size);
  line-height: var(--t-h2-lh);
  letter-spacing: var(--t-h2-tr);
  color: var(--fg-1);
}

.ds-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-h3-size);
  line-height: var(--t-h3-lh);
  letter-spacing: var(--t-h3-tr);
  color: var(--fg-1);
}

.ds-h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-h4-size);
  line-height: var(--t-h4-lh);
  letter-spacing: var(--t-h4-tr);
  color: var(--fg-1);
}

.ds-p {
  font-family: var(--font-body);
  font-size: var(--t-body-size);
  line-height: var(--t-body-lh);
  color: var(--fg-2);
  text-wrap: pretty;
}

.ds-small {
  font-size: var(--t-small-size);
  line-height: var(--t-small-lh);
  color: var(--fg-2);
}

.ds-micro {
  font-size: var(--t-micro-size);
  line-height: var(--t-micro-lh);
  letter-spacing: var(--t-micro-tr);
  color: var(--fg-3);
  text-transform: uppercase;
  font-weight: 600;
}

.ds-code, code.ds-code {
  font-family: var(--font-mono);
  font-size: var(--t-mono-size);
  line-height: var(--t-mono-lh);
  color: var(--fg-1);
}

.ds-serif-accent {
  font-family: 'Apple Garamond', 'Times New Roman', serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}