/* Eranos design tokens. Copy of design/eranos/tokens.css for the website. Regenerate from tokens.json; do not edit by hand. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&family=Manrope:wght@800&display=swap');
:root {
  color-scheme: light dark;
  --space-base: 4px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-xxl: 32px;
  --space-xxxl: 48px;
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-pill: 999px;
  --size-touch-min: 44px;
  --size-button-sm: 36px;
  --size-button-md: 48px;
  --size-button-lg: 56px;
  --size-meander-band: 12px;
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
  --font-mark: 'Manrope', Helvetica, Arial, sans-serif;
  --type-display: 700 40px/44px var(--font-display);
  --tracking-display: 0.5px;
  --type-title: 700 28px/34px var(--font-display);
  --tracking-title: 0.25px;
  --type-heading: 600 20px/26px var(--font-body);
  --tracking-heading: 0px;
  --type-body: 400 16px/24px var(--font-body);
  --tracking-body: 0px;
  --type-body-small: 400 14px/20px var(--font-body);
  --tracking-body-small: 0.1px;
  --type-label: 600 14px/18px var(--font-body);
  --tracking-label: 0.2px;
  --type-caption: 500 12px/16px var(--font-mono);
  --tracking-caption: 0.4px;
}
:root {
  --color-background: #F0EBE3;
  --color-surface: #F8F5EF;
  --color-surface-elevated: #FFFFFF;
  --color-surface-sunken: #E6DED2;
  --color-border: #E1D9CC;
  --color-border-strong: #8A8071;
  --color-text-primary: #17242C;
  --color-text-secondary: #3E5158;
  --color-text-muted: #59686E;
  --color-text-disabled: #94A0A3;
  --color-accent: #1A4FA0;
  --color-accent-foreground: #FFFFFF;
  --color-accent-pressed: #103A75;
  --color-accent-subtle: #DCE6F3;
  --color-focus-ring: #1A4FA0;
  --color-success: #2E6A54;
  --color-success-foreground: #FFFFFF;
  --color-warning: #8A5A10;
  --color-warning-foreground: #FFFFFF;
  --color-danger: #A63822;
  --color-danger-foreground: #FFFFFF;
  --color-danger-pressed: #832A18;
  --material-wood: #633F24;
  --material-wood-dark: #3D2716;
  --material-wood-grain: #8A6F58;
  --material-brass: #B39567;
  --material-brass-dark: #6F5C40;
  --material-enamel: #F1EBE4;
  --material-ivory: #E9E1D5;
  --material-glass: #DCE6F3;
  --material-felt: #204A3B;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --color-background: #101A22;
  --color-surface: #17222B;
  --color-surface-elevated: #1F2C36;
  --color-surface-sunken: #223039;
  --color-border: #2A3A45;
  --color-border-strong: #66798A;
  --color-text-primary: #EFF3F4;
  --color-text-secondary: #A9BAC2;
  --color-text-muted: #7E9099;
  --color-text-disabled: #5E7078;
  --color-accent: #57C9D6;
  --color-accent-foreground: #06171B;
  --color-accent-pressed: #86DDE6;
  --color-accent-subtle: #12303F;
  --color-focus-ring: #57C9D6;
  --color-success: #6FD3A6;
  --color-success-foreground: #05170F;
  --color-warning: #E8B85C;
  --color-warning-foreground: #221800;
  --color-danger: #FF9C82;
  --color-danger-foreground: #2A0C05;
  --color-danger-pressed: #FFBBA8;
  --material-wood: #4B3D30;
  --material-wood-dark: #2D251D;
  --material-wood-grain: #6E583A;
  --material-brass: #B8954F;
  --material-brass-dark: #6B562E;
  --material-enamel: #CAC5B7;
  --material-ivory: #BCB5A2;
  --material-glass: #3E828E;
  --material-felt: #2B4E47;
}
}
:root[data-theme="dark"] {
  --color-background: #101A22;
  --color-surface: #17222B;
  --color-surface-elevated: #1F2C36;
  --color-surface-sunken: #223039;
  --color-border: #2A3A45;
  --color-border-strong: #66798A;
  --color-text-primary: #EFF3F4;
  --color-text-secondary: #A9BAC2;
  --color-text-muted: #7E9099;
  --color-text-disabled: #5E7078;
  --color-accent: #57C9D6;
  --color-accent-foreground: #06171B;
  --color-accent-pressed: #86DDE6;
  --color-accent-subtle: #12303F;
  --color-focus-ring: #57C9D6;
  --color-success: #6FD3A6;
  --color-success-foreground: #05170F;
  --color-warning: #E8B85C;
  --color-warning-foreground: #221800;
  --color-danger: #FF9C82;
  --color-danger-foreground: #2A0C05;
  --color-danger-pressed: #FFBBA8;
  --material-wood: #4B3D30;
  --material-wood-dark: #2D251D;
  --material-wood-grain: #6E583A;
  --material-brass: #B8954F;
  --material-brass-dark: #6B562E;
  --material-enamel: #CAC5B7;
  --material-ivory: #BCB5A2;
  --material-glass: #3E828E;
  --material-felt: #2B4E47;
}

/* Base text roles */
.t-display { font: var(--type-display); letter-spacing: var(--tracking-display); }
.t-title   { font: var(--type-title);   letter-spacing: var(--tracking-title); }
.t-heading { font: var(--type-heading); letter-spacing: var(--tracking-heading); }
.t-body    { font: var(--type-body);    letter-spacing: var(--tracking-body); }
.t-small   { font: var(--type-body-small); letter-spacing: var(--tracking-body-small); }
.t-label   { font: var(--type-label);   letter-spacing: var(--tracking-label); }
.t-caption { font: var(--type-caption); letter-spacing: var(--tracking-caption); }
.t-eyebrow { font: 500 11px/16px var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); }
:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: var(--space-xs); }
