/* libre-franklin-cyrillic-ext-wght-normal */
@font-face {
  font-family: 'Libre Franklin Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/_build/assets/libre-franklin-cyrillic-ext-wght-normal-BbRulJFC.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* libre-franklin-cyrillic-wght-normal */
@font-face {
  font-family: 'Libre Franklin Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/_build/assets/libre-franklin-cyrillic-wght-normal-se3OnFSl.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* libre-franklin-vietnamese-wght-normal */
@font-face {
  font-family: 'Libre Franklin Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/_build/assets/libre-franklin-vietnamese-wght-normal-DTJpi3oK.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* libre-franklin-latin-ext-wght-normal */
@font-face {
  font-family: 'Libre Franklin Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/_build/assets/libre-franklin-latin-ext-wght-normal-CeZZaleV.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* libre-franklin-latin-wght-normal */
@font-face {
  font-family: 'Libre Franklin Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/_build/assets/libre-franklin-latin-wght-normal-CLTz0ja0.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/*
 * By Morning - Web Package Styles
 * Uses the shared design system tokens
 */

/* Component styles */

/*
 * Empty
 * Reusable empty-state card. The [data-slot="empty-card"] rule in the
 * workspace _shared.css already provides dashed border + radius + bg-surface
 * when used inside [data-page~="workspace-[id]"]. This file adds the
 * title/description/action layout, plus a fallback shell so the component
 * is usable outside that page scope.
 */

[data-component="empty"] {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Fallback shell when not inside the workspace page scope */

[data-component="empty"]:not([data-page~="workspace-[id]"] *) {
  padding: var(--space-6);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface);
}

[data-component="empty"] [data-slot="title"] {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-md);
  font-weight: 500;
  letter-spacing: var(--letter-spacing-normal);
  line-height: var(--line-height-snug);
  color: var(--color-text-primary);
}

[data-component="empty"] [data-slot="description"] {
  margin: 0;
  max-width: 50ch;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  color: var(--color-text-secondary);
}

[data-component="empty"] [data-slot="action"] {
  margin-top: var(--space-3);
}

/*
 * CopyButton
 * The base button styling is inherited from the page (e.g. workspace
 * [data-page~="workspace-[id]"] button). This file only defines the
 * size="sm" variant so it can be used in compact contexts.
 */

[data-component="copy-button"][data-size="sm"] {
  padding: 0.375rem 0.625rem;
  font-size: var(--font-size-xs);
}

/*
 * Popover
 * Headless trigger + panel popover. The trigger slot is a passthrough
 * wrapper; the consumer supplies their own button/element. The panel
 * floats below the trigger and is positioned via data-align.
 */

[data-component="popover"] {
  position: relative;
  display: inline-block;
}

[data-component="popover"] [data-slot="trigger"] {
  display: inline-flex;
}

[data-component="popover"] [data-slot="panel"] {
  position: absolute;
  top: calc(100% + var(--space-2));
  z-index: 50;
  min-width: 12rem;
  padding: var(--space-2);
  border: 1px solid rgba(26, 26, 26, 0.08);
  border-radius: 0.625rem;
  background: #fff;
  box-shadow: var(--shadow-md);
}

[data-component="popover"] [data-slot="panel"][data-align="start"] {
  left: 0;
}

[data-component="popover"] [data-slot="panel"][data-align="end"] {
  right: 0;
}

/* Import design tokens (font-faces are defined here with local paths) */

@font-face {
  font-family: "Cooper BT";
  src:
    url("/fonts/CooperBTStdLight/font.woff2") format("woff2"),
    url("/fonts/CooperBTStdLight/font.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/fonts/AtkinsonHyperlegibleNext/AtkinsonHyperlegibleNext-ExtraLight.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/fonts/AtkinsonHyperlegibleNext/AtkinsonHyperlegibleNext-ExtraLightItalic.woff2") format("woff2");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/fonts/AtkinsonHyperlegibleNext/AtkinsonHyperlegibleNext-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/fonts/AtkinsonHyperlegibleNext/AtkinsonHyperlegibleNext-LightItalic.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/fonts/AtkinsonHyperlegibleNext/AtkinsonHyperlegibleNext-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/fonts/AtkinsonHyperlegibleNext/AtkinsonHyperlegibleNext-RegularItalic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/fonts/AtkinsonHyperlegibleNext/AtkinsonHyperlegibleNext-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/fonts/AtkinsonHyperlegibleNext/AtkinsonHyperlegibleNext-MediumItalic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/fonts/AtkinsonHyperlegibleNext/AtkinsonHyperlegibleNext-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/fonts/AtkinsonHyperlegibleNext/AtkinsonHyperlegibleNext-SemiBoldItalic.woff2") format("woff2");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/fonts/AtkinsonHyperlegibleNext/AtkinsonHyperlegibleNext-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/fonts/AtkinsonHyperlegibleNext/AtkinsonHyperlegibleNext-BoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/fonts/AtkinsonHyperlegibleNext/AtkinsonHyperlegibleNext-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/fonts/AtkinsonHyperlegibleNext/AtkinsonHyperlegibleNext-ExtraBoldItalic.woff2") format("woff2");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "CommitMono";
  src: url("/fonts/CommitMonoV143/CommitMono-400-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "CommitMono";
  src: url("/fonts/CommitMonoV143/CommitMono-400-Italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "CommitMono";
  src: url("/fonts/CommitMonoV143/CommitMono-700-Regular.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "CommitMono";
  src: url("/fonts/CommitMonoV143/CommitMono-700-Italic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Design System Tokens */

:root {
  /* Font Families */
  --font-family-heading: "Cooper BT", Georgia, "Times New Roman", serif;
  --font-family-body:
    "Atkinson Hyperlegible Next", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    sans-serif;
  --font-family-mono: "CommitMono", "SF Mono", Monaco, "Cascadia Code", monospace;

  /* Colors - Surfaces */
  --color-surface-dark: #636363;
  --color-surface-darkest: #1a1a1a;
  --color-surface-mid: #a0a0a0;
  --color-surface-light: #fafafa;

  /* Colors - Text */
  --color-text-primary: #1a1a1a;
  --color-text-secondary: #636363;
  --color-text-tertiary: #a0a0a0;
  --color-text-inverse: #fafafa;
  /* packages/ui theme.css light — secondary labels, muted links */
  --text-weak: #8f8f8f;

  /* Colors - Accents */
  --color-accent-orange: #ff9c36;
  --color-accent-yellow: #ffe457;
  --color-accent-blue: #22afff;
  --color-accent-pink: #ee3726;
  --color-accent-green: #4ec722;
  --color-accent-purple: #a32fe1;

  /* App UI parity (packages/ui theme.css light) — e.g. sidebar rail buttons */
  --background-base: #f8f8f8;
  --border-weak-base: #e5e5e5;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;

  /* Border Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-full: 999px;

  /* Font Sizes */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.8125rem;
  --font-size-base: 0.875rem;
  --font-size-md: 1rem;

  /* Letter Spacing */
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.06em;

  /* Line Heights */
  --line-height-tight: 1.15;
  --line-height-snug: 1.3;
  --line-height-normal: 1.5;

  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Shadows */
  --shadow-focus: 0 0 0 2px rgba(26, 26, 26, 0.12);
  --shadow-sm: 0 1px 4px rgba(26, 26, 26, 0.06);
  --shadow-md: 0 4px 24px rgba(26, 26, 26, 0.08), 0 1px 4px rgba(26, 26, 26, 0.06);
  --shadow-card: 0 1px 2px rgba(26, 26, 26, 0.04), 0 8px 24px -12px rgba(26, 26, 26, 0.08);

  /* Aliases used by route-level CSS modules */
  --color-bg: #ffffff;
  --color-bg-surface: var(--background-base);
  --color-surface-hover: #f1f1f1;
  --color-border: var(--border-weak-base);
  --color-border-muted: #efefef;
  --color-text: var(--color-text-primary);
  --color-text-muted: var(--text-weak);
  --color-accent: var(--color-text-primary);
  --color-accent-alpha: rgba(26, 26, 26, 0.12);
  --color-danger: var(--color-accent-pink);
  --color-success: var(--color-accent-green);
  --color-primary: var(--color-text-primary);
  --color-primary-hover: #2e2e2e;
  --color-primary-text: var(--color-surface-light);

  --font-sans: var(--font-family-body);
  --font-mono: var(--font-family-mono);

  /* Extended type scale */
  --font-size-lg: 1rem;
  --font-size-xl: 1.125rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 2rem;
  --font-size-4xl: 2.5rem;
  --font-size-5xl: 3.5rem;

  /* Extended spacing */
  --space-3-5: 0.875rem;

  /* Radius aliases */
  --border-radius-sm: var(--radius-sm);
  --border-radius-md: var(--radius-md);
  --border-radius-lg: var(--radius-lg);
}

/* Base Styles */

* {
  box-sizing: border-box;
}

body {
  font-family: var(--font-family-body);
  margin: 0;
  padding: 0;
  background: var(--color-surface-light);
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-light);
  color: var(--color-text-primary);
}

h1 {
  font-size: var(--font-size-5xl);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  margin: 0 0 var(--space-6);
}

h2 {
  font-size: var(--font-size-4xl);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  margin: 0 0 var(--space-4);
}

h3 {
  font-size: var(--font-size-3xl);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-normal);
  margin: 0 0 var(--space-3);
}

h4 {
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-normal);
  margin: 0 0 var(--space-3);
}

h5 {
  font-size: var(--font-size-xl);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-normal);
  margin: 0 0 var(--space-2);
}

h6 {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-normal);
  margin: 0 0 var(--space-2);
}

code,
pre,
kbd,
samp {
  font-family: var(--font-family-mono);
}

a {
  color: var(--color-accent-blue);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

::selection {
  background-color: var(--color-accent-yellow);
  color: var(--color-text-primary);
}