/* Swiftener Platform — shared design tokens (light + dark)
   Direction: "bench ink" — cool paper, pine accent, sharp geometry.
   Layout/chrome tokens only. Suites may define --suite-* for personality.
   Fonts are self-hosted under /platform/fonts (no third-party network). */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/platform/fonts/BricolageGrotesque-Variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/platform/fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/platform/fonts/IBMPlexMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  --platform-font: "Bricolage Grotesque", "Segoe UI", ui-sans-serif, sans-serif;
  --platform-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", "SFMono-Regular", monospace;

  --platform-radius-sm: 0.2rem;
  --platform-radius: 0.3rem;
  --platform-radius-lg: 0.4rem;
  --platform-radius-full: 0.35rem;

  --platform-shadow-sm: none;
  --platform-shadow: none;
  --platform-shadow-lg: none;

  --platform-accent: #0f6b52;
  --platform-accent-hover: #0a5340;
  --platform-accent-soft: rgba(15, 107, 82, 0.12);

  /* Light is the platform default */
  --platform-bg: #e7e9e4;
  --platform-bg-elevated: #f3f4f0;
  --platform-surface: #f7f8f4;
  --platform-surface-muted: #dde1da;
  --platform-border: #a7b0a4;
  --platform-text: #141816;
  --platform-text-muted: #2f3933;
  --platform-text-subtle: #5a655c;

  --platform-success: #0f6b52;
  --platform-error: #a61e2e;
  --platform-warning: #9a5b00;

  --platform-topbar-h: 3rem;
  --platform-content-max: 72rem;
  --platform-sidebar-w: 320px;

  --platform-focus: 0 0 0 2px var(--platform-bg), 0 0 0 4px var(--platform-accent);
  --platform-transition: 0.15s ease;
  --platform-hatch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M0 8L8 0' stroke='%23141816' stroke-opacity='0.04' stroke-width='1'/%3E%3C/svg%3E");
}

:root[data-theme="light"] {
  --platform-shadow-sm: none;
  --platform-shadow: none;
  --platform-shadow-lg: none;
  --platform-accent-soft: rgba(15, 107, 82, 0.12);
  --platform-bg: #e7e9e4;
  --platform-bg-elevated: #f3f4f0;
  --platform-surface: #f7f8f4;
  --platform-surface-muted: #dde1da;
  --platform-border: #a7b0a4;
  --platform-text: #141816;
  --platform-text-muted: #2f3933;
  --platform-text-subtle: #5a655c;
  --platform-success: #0f6b52;
  --platform-error: #a61e2e;
  --platform-warning: #9a5b00;
}

:root[data-theme="dark"] {
  --platform-bg: #101411;
  --platform-bg-elevated: #181c19;
  --platform-surface: #222924;
  --platform-surface-muted: #2c342f;
  --platform-border: #556058;
  --platform-text: #eef1ec;
  --platform-text-muted: #c8d1cb;
  --platform-text-subtle: #a3ada6;
  --platform-accent: #4db892;
  --platform-accent-hover: #6bc9a6;
  --platform-accent-soft: rgba(77, 184, 146, 0.18);
  --platform-success: #4db892;
  --platform-error: #f08a92;
  --platform-warning: #e8b85c;
  --platform-shadow-sm: none;
  --platform-shadow: none;
  --platform-shadow-lg: none;
  --platform-hatch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M0 8L8 0' stroke='%23e8ebe6' stroke-opacity='0.05' stroke-width='1'/%3E%3C/svg%3E");
}

/* Map legacy project variables to platform tokens */
:root {
  --bg: var(--platform-bg);
  --surface: var(--platform-surface);
  --surface-2: var(--platform-surface-muted);
  --surface-muted: var(--platform-surface-muted);
  --border: var(--platform-border);
  --text: var(--platform-text);
  --text-muted: var(--platform-text-muted);
  --muted: var(--platform-text-muted);
  --accent: var(--platform-accent);
  --accent-hover: var(--platform-accent-hover);
  --radius: var(--platform-radius);
  --font-sans: var(--platform-font);
  --color-bg: var(--platform-bg);
  --color-surface: var(--platform-surface);
  --color-border: var(--platform-border);
  --color-text: var(--platform-text);
  --color-muted: var(--platform-text-muted);
  --color-brand: var(--platform-accent);
}

/* On-accent text for filled buttons (white in light; near-ink in dark for AA) */
:root {
  --platform-on-accent: #ffffff;
}

:root[data-theme="dark"] {
  --platform-on-accent: #0a1210;
}

/* Suite accent overrides via data-platform-accent on <html> */
:root[data-platform-accent="rose"] { --platform-accent: #b4233a; --platform-accent-hover: #8f1a2d; --platform-accent-soft: rgba(180, 35, 58, 0.12); }
:root[data-platform-accent="emerald"] { --platform-accent: #0f6b52; --platform-accent-hover: #0a5340; --platform-accent-soft: rgba(15, 107, 82, 0.12); }
:root[data-platform-accent="orange"] { --platform-accent: #c24e1d; --platform-accent-hover: #9a3c14; --platform-accent-soft: rgba(194, 78, 29, 0.12); }
:root[data-platform-accent="sky"] { --platform-accent: #1d5f8a; --platform-accent-hover: #164a6c; --platform-accent-soft: rgba(29, 95, 138, 0.12); }
:root[data-platform-accent="purple"] { --platform-accent: #9f2d4a; --platform-accent-hover: #7d2239; --platform-accent-soft: rgba(159, 45, 74, 0.12); }
:root[data-platform-accent="blue"] { --platform-accent: #1d4f7a; --platform-accent-hover: #163c5c; --platform-accent-soft: rgba(29, 79, 122, 0.12); }
:root[data-platform-accent="teal"] { --platform-accent: #0f6b5c; --platform-accent-hover: #0a5347; --platform-accent-soft: rgba(15, 107, 92, 0.12); }
:root[data-platform-accent="forest"] { --platform-accent: #1f4d3a; --platform-accent-hover: #163628; --platform-accent-soft: rgba(31, 77, 58, 0.14); }

/* Dark-theme accents stay bright enough on charcoal surfaces */
:root[data-theme="dark"][data-platform-accent="rose"] { --platform-accent: #e0717a; --platform-accent-hover: #f08a92; --platform-accent-soft: rgba(224, 113, 122, 0.18); }
:root[data-theme="dark"][data-platform-accent="emerald"] { --platform-accent: #4db892; --platform-accent-hover: #6bc9a6; --platform-accent-soft: rgba(77, 184, 146, 0.18); }
:root[data-theme="dark"][data-platform-accent="orange"] { --platform-accent: #e08a4a; --platform-accent-hover: #f0a060; --platform-accent-soft: rgba(224, 138, 74, 0.18); }
:root[data-theme="dark"][data-platform-accent="sky"] { --platform-accent: #5ba3d4; --platform-accent-hover: #7bb8e0; --platform-accent-soft: rgba(91, 163, 212, 0.18); }
:root[data-theme="dark"][data-platform-accent="purple"] { --platform-accent: #d46a88; --platform-accent-hover: #e0859c; --platform-accent-soft: rgba(212, 106, 136, 0.18); }
:root[data-theme="dark"][data-platform-accent="blue"] { --platform-accent: #6a9fd4; --platform-accent-hover: #88b4e0; --platform-accent-soft: rgba(106, 159, 212, 0.18); }
:root[data-theme="dark"][data-platform-accent="teal"] { --platform-accent: #4db892; --platform-accent-hover: #6bc9a6; --platform-accent-soft: rgba(77, 184, 146, 0.18); }
:root[data-theme="dark"][data-platform-accent="forest"] { --platform-accent: #5aaa7e; --platform-accent-hover: #74c094; --platform-accent-soft: rgba(90, 170, 126, 0.18); }

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body.platform-body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--platform-font);
  background-color: var(--platform-bg);
  background-image: var(--platform-hatch);
  color: var(--platform-text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

body.platform-body.has-platform-topbar {
  padding-top: var(--platform-topbar-h);
}

.platform-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 0.75rem 1rem;
  background: var(--platform-accent);
  color: #fff;
  text-decoration: none;
  border-radius: var(--platform-radius-sm);
}

.platform-skip-link:focus {
  left: 1rem;
  top: 1rem;
}