@import url("./tokens.css");

@font-face {
  font-family: "ABC Diatype";
  src: url("./fonts/diatype-regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "ABC Diatype";
  src: url("./fonts/diatype-medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "ABC Diatype";
  src: url("./fonts/diatype-bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "ABC Diatype Semi-Mono";
  src: url("./fonts/diatype-semi-mono.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "ABC Diatype Semi-Mono";
  src: url("./assets/fonts/ABCDiatypeSemi-Mono-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Semantic surface/foreground pairs follow the supplied theming reference.
   CLAWD defaults to dark; explicit .light and .dark use the same contract. */
:root,
.dark {
  color-scheme: dark;
  --font-sans: "ABC Diatype", Arial, sans-serif;
  --font-mono: "ABC Diatype Semi-Mono", ui-monospace, monospace;
  --background: #07050c;
  --foreground: var(--brand-text);
  --card: #120d1c;
  --card-foreground: var(--foreground);
  --popover: #1a1426;
  --popover-foreground: var(--foreground);
  --primary: var(--solana-green);
  --primary-foreground: var(--brand-ink);
  --secondary: #231632;
  --secondary-foreground: #e9ddff;
  --muted: #161021;
  --muted-foreground: var(--brand-muted);
  --accent: #302040;
  --accent-foreground: var(--foreground);
  --destructive: #ff6b8a;
  --destructive-foreground: var(--brand-ink);
  --warning: #ffcf8a;
  --warning-foreground: var(--brand-ink);
  --border: var(--brand-edge);
  --input: rgba(153, 69, 255, 0.4);
  --ring: var(--solana-green);
  --chart-1: var(--solana-green);
  --chart-2: var(--solana-purple);
  --chart-3: #c4b5fd;
  --chart-4: color-mix(in srgb, var(--solana-green), var(--solana-purple) 40%);
  --chart-5: var(--destructive);
  --sidebar: var(--background);
  --sidebar-foreground: var(--foreground);
  --sidebar-primary: var(--primary);
  --sidebar-primary-foreground: var(--primary-foreground);
  --sidebar-accent: var(--accent);
  --sidebar-accent-foreground: var(--accent-foreground);
  --sidebar-border: var(--border);
  --sidebar-ring: var(--ring);
  --radius: 0.875rem;
  --radius-sm: calc(var(--radius) * 0.6);
  --radius-md: calc(var(--radius) * 0.8);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) * 1.4);
  --radius-2xl: calc(var(--radius) * 1.8);
  --radius-3xl: calc(var(--radius) * 2.2);
  --radius-4xl: calc(var(--radius) * 2.6);
  /* Existing website and Open Intelligent UI consumers share these aliases. */
  --bg: var(--background);
  --panel: var(--card);
  --text: var(--foreground);
  --line: var(--border);
  --green: var(--solana-green);
  --purple: var(--solana-purple);
  --font: var(--font-sans);
  --mono: var(--font-mono);
  --p: var(--foreground);
  --s: var(--muted-foreground);
  --bg2: var(--card);
  --b: var(--border);
}
.light {
  color-scheme: light;
  --background: #f4f7ff;
  --foreground: var(--brand-ink);
  --card: #ffffff;
  --popover: #ffffff;
  --secondary: #e9ddff;
  --secondary-foreground: #302040;
  --muted: #ece8f2;
  --muted-foreground: #62586f;
  --accent: #e9ddff;
  --border: rgba(11, 6, 20, 0.16);
  --input: rgba(153, 69, 255, 0.45);
  --ring: var(--solana-purple);
  --destructive: #ac244d;
  --destructive-foreground: #ffffff;
  --warning: #865000;
  --warning-foreground: #ffffff;
  --card-foreground: var(--foreground);
  --popover-foreground: var(--foreground);
  --accent-foreground: var(--foreground);
  --sidebar: var(--background);
  --sidebar-foreground: var(--foreground);
  --sidebar-primary: var(--primary);
  --sidebar-primary-foreground: var(--primary-foreground);
  --sidebar-accent: var(--accent);
  --sidebar-accent-foreground: var(--accent-foreground);
  --sidebar-border: var(--border);
  --sidebar-ring: var(--ring);
  --bg: var(--background);
  --panel: var(--card);
  --text: var(--foreground);
  --line: var(--border);
  --p: var(--foreground);
  --s: var(--muted-foreground);
  --bg2: var(--card);
  --b: var(--border);
}
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
code, kbd, pre { font-family: var(--font-mono); }
::selection { background: var(--primary); color: var(--primary-foreground); }
:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 4px;
}
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
}