/*fern-site-stylesheet*/:root {
  --header-height: 64px;
  --header-height-real: 64px;
  --mobile-header-height-real: 64px;
  --content-width: 640px;
  --sidebar-width: 288px;
  --page-width: 100vw;
  --logo-height: 20px;
  --font-body: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-heading: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

:root {
  --typography-body-font-family: var(--font-body);
  --typography-heading-font-family: var(--font-heading);
  --typography-code-font-family: var(--font-code);
}


.light, :root {
  --accent-1: #f8f6f4;
  --accent-2: #fef2e2;
  --accent-3: #ffe8b9;
  --accent-4: #ffdd9b;
  --accent-5: #ffd07b;
  --accent-6: #ffc36b;
  --accent-7: #ecb25d;
  --accent-8: #db992c;
  --accent-9: #ffb500;
  --accent-10: #feac00;
  --accent-11: #9c6100;
  --accent-12: #4a381d;

  --accent-a1: #3c3af404;
  --accent-a2: #fff0ddc0;
  --accent-a3: #ffe8b9;
  --accent-a4: #ffdd9b;
  --accent-a5: #ffd07b;
  --accent-a6: #ffc36b;
  --accent-a7: #e386009e;
  --accent-a8: #d58401d2;
  --accent-a9: #ffb500;
  --accent-a10: #ff9300c0;
  --accent-a11: #9c6100;
  --accent-a12: #321f00e1;

  --accent-contrast: #2d1f0a;
  --accent-surface: #fff1decc;
  --accent-indicator: #ffb500;
  --accent-track: #ffb500;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --accent-1: oklch(97.5% 0.0031 74.83);
      --accent-2: oklch(96.6% 0.0243 74.83);
      --accent-3: oklch(94.8% 0.0711 74.83);
      --accent-4: oklch(92.3% 0.1065 74.83);
      --accent-5: oklch(89.4% 0.1352 74.83);
      --accent-6: oklch(85.5% 0.1258 74.83);
      --accent-7: oklch(80.1% 0.1225 74.83);
      --accent-8: oklch(73.1% 0.1405 74.83);
      --accent-9: oklch(83.6% 0.1815 74.83);
      --accent-10: oklch(80.4% 0.1704 74.83);
      --accent-11: oklch(54.2% 0.1434 74.83);
      --accent-12: oklch(35.3% 0.0477 74.83);

      --accent-a1: color(display-p3 0.0824 0.0745 0.9569 / 0.013);
      --accent-a2: color(display-p3 1 0.8667 0.7059 / 0.25);
      --accent-a3: color(display-p3 0.9843 0.6941 0.0039 / 0.222);
      --accent-a4: color(display-p3 0.9608 0.6588 0.0039 / 0.332);
      --accent-a5: color(display-p3 0.9569 0.6353 0.0039 / 0.447);
      --accent-a6: color(display-p3 0.949 0.5765 0 / 0.505);
      --accent-a7: color(display-p3 0.8196 0.498 0 / 0.562);
      --accent-a8: color(display-p3 0.7569 0.4745 0 / 0.722);
      --accent-a9: color(display-p3 0.9451 0.6314 0 / 0.738);
      --accent-a10: color(display-p3 0.9373 0.5961 0 / 0.75);
      --accent-a11: color(display-p3 0.5176 0.302 0 / 0.869);
      --accent-a12: color(display-p3 0.1686 0.1059 0 / 0.865);

      --accent-contrast: #2d1f0a;
      --accent-surface: color(display-p3 0.9922 0.9451 0.8784 / 0.8);
      --accent-indicator: oklch(83.6% 0.1815 74.83);
      --accent-track: oklch(83.6% 0.1815 74.83);
    }
  }
}


.light, :root {
  --grayscale-1: #fdfdfc;
  --grayscale-2: #f9f9f8;
  --grayscale-3: #f1f0ef;
  --grayscale-4: #e9e8e6;
  --grayscale-5: #e2e1de;
  --grayscale-6: #dad9d6;
  --grayscale-7: #cfceca;
  --grayscale-8: #bcbbb5;
  --grayscale-9: #8d8d86;
  --grayscale-10: #82827c;
  --grayscale-11: #63635e;
  --grayscale-12: #21201c;

  --grayscale-a1: #55550003;
  --grayscale-a2: #25250007;
  --grayscale-a3: #20100010;
  --grayscale-a4: #1f150019;
  --grayscale-a5: #1f180021;
  --grayscale-a6: #19130029;
  --grayscale-a7: #19140035;
  --grayscale-a8: #1915014a;
  --grayscale-a9: #0f0f0079;
  --grayscale-a10: #0c0c0083;
  --grayscale-a11: #080800a1;
  --grayscale-a12: #060500e3;

  --grayscale-contrast: #000;
  --grayscale-surface: #ffffffcc;
  --grayscale-indicator: #8d8d86;
  --grayscale-track: #8d8d86;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --grayscale-1: color(display-p3 0.992 0.992 0.989);
      --grayscale-2: color(display-p3 0.977 0.977 0.973);
      --grayscale-3: color(display-p3 0.943 0.942 0.936);
      --grayscale-4: color(display-p3 0.913 0.912 0.903);
      --grayscale-5: color(display-p3 0.885 0.883 0.873);
      --grayscale-6: color(display-p3 0.854 0.852 0.839);
      --grayscale-7: color(display-p3 0.813 0.81 0.794);
      --grayscale-8: color(display-p3 0.738 0.734 0.713);
      --grayscale-9: color(display-p3 0.553 0.553 0.528);
      --grayscale-10: color(display-p3 0.511 0.511 0.488);
      --grayscale-11: color(display-p3 0.388 0.388 0.37);
      --grayscale-12: color(display-p3 0.129 0.126 0.111);

      --grayscale-a1: #55550003;
      --grayscale-a2: #25250007;
      --grayscale-a3: #20100010;
      --grayscale-a4: #1f150019;
      --grayscale-a5: #1f180021;
      --grayscale-a6: #19130029;
      --grayscale-a7: #19140035;
      --grayscale-a8: #1915014a;
      --grayscale-a9: #0f0f0079;
      --grayscale-a10: #0c0c0083;
      --grayscale-a11: #080800a1;
      --grayscale-a12: #060500e3;

      --grayscale-contrast: #000;
      --grayscale-surface: color(display-p3 1 1 1 / 80%);
      --grayscale-indicator: color(display-p3 0.553 0.553 0.528);
      --grayscale-track: color(display-p3 0.553 0.553 0.528);
    }
  }
}


.dark {
  --accent-1: #19150f;
  --accent-2: #1f1911;
  --accent-3: #30210a;
  --accent-4: #422600;
  --accent-5: #4f2f00;
  --accent-6: #5d3d05;
  --accent-7: #714f18;
  --accent-8: #8f6520;
  --accent-9: #ffad00;
  --accent-10: #f4a200;
  --accent-11: #ffbb39;
  --accent-12: #ffe3ba;

  --accent-a1: #e9150006;
  --accent-a2: #fe6a000c;
  --accent-a3: #fa78001f;
  --accent-a4: #ff6c0032;
  --accent-a5: #fc7b0041;
  --accent-a6: #fd950050;
  --accent-a7: #ffa71565;
  --accent-a8: #ffae2686;
  --accent-a9: #ffad00;
  --accent-a10: #fea800f4;
  --accent-a11: #ffbb39;
  --accent-a12: #ffe3ba;

  --accent-contrast: #2d1f0a;
  --accent-surface: #2a1d0980;
  --accent-indicator: #ffad00;
  --accent-track: #ffad00;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --accent-1: oklch(19.7% 0.0119 74.83);
      --accent-2: oklch(21.8% 0.0179 74.83);
      --accent-3: oklch(26.1% 0.043 74.83);
      --accent-4: oklch(29.7% 0.072 74.83);
      --accent-5: oklch(33.7% 0.0806 74.83);
      --accent-6: oklch(38.7% 0.0787 74.83);
      --accent-7: oklch(45.3% 0.0831 74.83);
      --accent-8: oklch(53.8% 0.0992 74.83);
      --accent-9: oklch(80.7% 0.1704 74.83);
      --accent-10: oklch(77.4% 0.1704 74.83);
      --accent-11: oklch(84.6% 0.1619 74.83);
      --accent-12: oklch(93.1% 0.063 74.83);

      --accent-a1: color(display-p3 0.9529 0.0863 0 / 0.018);
      --accent-a2: color(display-p3 0.9922 0.451 0 / 0.043);
      --accent-a3: color(display-p3 1 0.5451 0 / 0.111);
      --accent-a4: color(display-p3 1 0.4784 0 / 0.179);
      --accent-a5: color(display-p3 1 0.5451 0 / 0.23);
      --accent-a6: color(display-p3 1 0.6392 0.0078 / 0.29);
      --accent-a7: color(display-p3 0.9961 0.702 0.1961 / 0.375);
      --accent-a8: color(display-p3 1 0.7255 0.2627 / 0.498);
      --accent-a9: color(display-p3 1 0.7255 0.2471 / 0.949);
      --accent-a10: color(display-p3 1 0.7137 0.2392 / 0.903);
      --accent-a11: color(display-p3 1 0.7725 0.3451 / 0.958);
      --accent-a12: color(display-p3 1 0.9137 0.7608 / 0.979);

      --accent-contrast: #2d1f0a;
      --accent-surface: color(display-p3 0.1569 0.1098 0.0392 / 0.5);
      --accent-indicator: oklch(80.7% 0.1704 74.83);
      --accent-track: oklch(80.7% 0.1704 74.83);
    }
  }
}


.dark {
  --grayscale-1: #111113;
  --grayscale-2: #18191b;
  --grayscale-3: #212225;
  --grayscale-4: #272a2d;
  --grayscale-5: #2e3135;
  --grayscale-6: #363a3f;
  --grayscale-7: #43484e;
  --grayscale-8: #5a6169;
  --grayscale-9: #696e77;
  --grayscale-10: #777b84;
  --grayscale-11: #b0b4ba;
  --grayscale-12: #edeef0;

  --grayscale-a1: #00000000;
  --grayscale-a2: #d8f4f609;
  --grayscale-a3: #ddeaf814;
  --grayscale-a4: #d3edf81d;
  --grayscale-a5: #d9edfe25;
  --grayscale-a6: #d6ebfd30;
  --grayscale-a7: #d9edff40;
  --grayscale-a8: #d9edff5d;
  --grayscale-a9: #dfebfd6d;
  --grayscale-a10: #e5edfd7b;
  --grayscale-a11: #f1f7feb5;
  --grayscale-a12: #fcfdffef;

  --grayscale-contrast: #fff;
  --grayscale-surface: rgba(0, 0, 0, 0.05);
  --grayscale-indicator: #696e77;
  --grayscale-track: #696e77;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --grayscale-1: color(display-p3 0.067 0.067 0.074);
      --grayscale-2: color(display-p3 0.095 0.098 0.105);
      --grayscale-3: color(display-p3 0.13 0.135 0.145);
      --grayscale-4: color(display-p3 0.156 0.163 0.176);
      --grayscale-5: color(display-p3 0.183 0.191 0.206);
      --grayscale-6: color(display-p3 0.215 0.226 0.244);
      --grayscale-7: color(display-p3 0.265 0.28 0.302);
      --grayscale-8: color(display-p3 0.357 0.381 0.409);
      --grayscale-9: color(display-p3 0.415 0.431 0.463);
      --grayscale-10: color(display-p3 0.469 0.483 0.514);
      --grayscale-11: color(display-p3 0.692 0.704 0.728);
      --grayscale-12: color(display-p3 0.93 0.933 0.94);

      --grayscale-a1: #00000000;
      --grayscale-a2: #d8f4f609;
      --grayscale-a3: #ddeaf814;
      --grayscale-a4: #d3edf81d;
      --grayscale-a5: #d9edfe25;
      --grayscale-a6: #d6ebfd30;
      --grayscale-a7: #d9edff40;
      --grayscale-a8: #d9edff5d;
      --grayscale-a9: #dfebfd6d;
      --grayscale-a10: #e5edfd7b;
      --grayscale-a11: #f1f7feb5;
      --grayscale-a12: #fcfdffef;

      --grayscale-contrast: #fff;
      --grayscale-surface: color(display-p3 0 0 0 / 5%);
      --grayscale-indicator: color(display-p3 0.415 0.431 0.463);
      --grayscale-track: color(display-p3 0.415 0.431 0.463);
    }
  }
}

.light, :root {
  color-scheme: light;
  --accent: rgba(255, 173, 0, 1);
  --background: rgba(251, 249, 244, 1);
  --border: rgba(236, 231, 220, 1);
  --sidebar-background: rgba(251, 249, 244, 1);
  --header-background: rgba(251, 249, 244, 1);
  --card-background: rgba(255, 255, 255, 1);
  --theme-color: #fbf9f4;
}

.dark {
  color-scheme: dark;
  --accent: rgba(255, 173, 0, 1);
  --background: rgba(20, 21, 26, 1);
  --border: rgba(44, 47, 58, 1);
  --sidebar-background: rgba(20, 21, 26, 1);
  --header-background: rgba(20, 21, 26, 1);
  --card-background: rgba(28, 30, 37, 1);
  --theme-color: #14151a;
}

/* =========================================================================
   Simplified Design System — Tokens
   Base: amber accent (#FFAD00) from logo, warm neutrals, paper background.
   Typography: Inter (body — confirmed brand face) + Bricolage Grotesque (display, proposed) + JetBrains Mono.
   ========================================================================= */

/* ---- Fonts (Google Fonts — body Inter is confirmed, display is a proposal) ---- */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ============ COLORS ============ */

  /* Brand — amber ramp (anchor: logo #FFAD00) */
  --amber-50:  #FFF8E5;
  --amber-100: #FFEDB8;
  --amber-200: #FFDC80;
  --amber-300: #FFC947;
  --amber-400: #FFBB1F;
  --amber-500: #FFAD00;   /* primary */
  --amber-600: #E59A00;   /* hover */
  --amber-700: #B87C00;
  --amber-800: #8A5C00;
  --amber-900: #5C3D00;

  /* Neutrals — warm graphite ramp */
  --ink:       #1B1D22;   /* near-black, primary text */
  --ink-2:     #3C4043;   /* secondary text, from wordmark */
  --ink-3:     #6B6F76;   /* muted text, metadata */
  --ink-4:     #9AA0A8;   /* placeholder, disabled */
  --line-strong: #D9D2C2;
  --line:      #ECE7DC;   /* hairline borders, dividers */
  --surface-2: #F5F1E8;   /* subtle alt surface */
  --paper:     #FBF9F4;   /* page canvas (warm off-white) */
  --white:     #FFFFFF;   /* card surface on top of paper */

  /* Agent palette (for the fleet) — each agent = one swatch */
  --agent-riley:  #FFAD00;   /* amber — Riley (lead) */
  --agent-pax:    #14A38A;   /* teal — paid ads */
  --agent-nova:   #8250C8;   /* plum — newsletter */
  --agent-quinn:  #3E82F7;   /* sky — reporting */
  --agent-leaf:   #4FA84A;   /* leaf — organic social */
  --agent-rose:   #E5526E;   /* rose — brand / PR */

  /* Agent tints (for backgrounds / chips) */
  --agent-riley-tint:  #FFF3D1;
  --agent-pax-tint:    #D9F1EC;
  --agent-nova-tint:   #EDE1F8;
  --agent-quinn-tint:  #DCE9FD;
  --agent-leaf-tint:   #DFEFDE;
  --agent-rose-tint:   #FADFE4;

  /* Semantic */
  --success:   #4FA84A;
  --success-tint: #DFEFDE;
  --warning:   #E59A00;
  --warning-tint: #FFEDB8;
  --danger:    #D64258;
  --danger-tint:  #FADFE4;
  --info:      #3E82F7;
  --info-tint: #DCE9FD;

  /* ============ TYPE ============ */
  --font-display: 'Bricolage Grotesque', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;

  /* Type scale (px) */
  --t-display-xl: 72px;
  --t-display-lg: 56px;
  --t-display-md: 44px;
  --t-h1: 36px;
  --t-h2: 28px;
  --t-h3: 22px;
  --t-h4: 18px;
  --t-body-lg: 18px;
  --t-body: 16px;
  --t-body-sm: 14px;
  --t-caption: 12px;

  /* Line heights */
  --lh-display: 1.02;
  --lh-heading: 1.15;
  --lh-body: 1.55;
  --lh-tight: 1.25;

  /* Letter spacing */
  --ls-display: -0.025em;
  --ls-heading: -0.018em;
  --ls-body: -0.005em;
  --ls-mono: 0em;

  /* ============ SPACING (4px base) ============ */
  --s-0: 0;
  --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;
  --s-32: 128px;

  /* ============ RADII ============ */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;   /* house radius */
  --r-lg: 20px;
  --r-xl: 28px;
  --r-full: 9999px;

  /* ============ SHADOWS (warm-tinted) ============ */
  --shadow-sm: 0 1px 2px rgba(24, 18, 8, .06), 0 1px 1px rgba(24, 18, 8, .04);
  --shadow-md: 0 8px 24px rgba(24, 18, 8, .08), 0 2px 6px rgba(24, 18, 8, .05);
  --shadow-lg: 0 24px 60px rgba(24, 18, 8, .14);
  --shadow-amber: 0 6px 20px rgba(255, 173, 0, .25);

  /* ============ EASING / DURATION ============ */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-med: 220ms;
  --dur-slow: 380ms;
}


/* Dark palette, adapted to Fern’s theme class. */
.dark {
  --paper:     #14151A;
  --white:     #1C1E25;
  --surface-2: #232530;
  --line:      #2C2F3A;
  --line-strong: #3A3D4A;
  --ink:       #F2EFE7;
  --ink-2:     #C4C2BD;
  --ink-3:     #8E8F95;
  --ink-4:     #5C5E66;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,.5);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.7);
}

/* Map the supplied Simplified tokens onto Fern without resetting its layout. */
:root {
  --font-heading: 'Inter', ui-sans-serif, system-ui, sans-serif !important;
  --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif !important;
  --font-code: var(--font-mono) !important;
  --radius: var(--r-xs) !important;
}

body {
  color: var(--ink);
  letter-spacing: var(--ls-body);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--ink);
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-heading);
}

::selection {
  background: var(--amber-300);
  color: #1B1D22;
}

.simplified-welcome-art {
  position: relative;
  margin: 28px 0 32px;
  border-radius: var(--r-md);
  overflow: hidden;
}

.simplified-welcome-art img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  margin: 0 !important;
}

.simplified-welcome-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--amber-500);
  mix-blend-mode: color;
  opacity: 0.5;
  pointer-events: none;
}