/* Nine Brand v1.1 theme for Paperclip.
   Loaded after Paperclip's own stylesheet; only overrides design tokens.
   Source of truth: Nine Brand design system (charcoal default, one orange signal). */

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Alexandria:wght@100..900&display=swap");

html:root {
  --font-sans: "Manrope", "Alexandria", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius: 0.5rem; /* 8px controls; cards scale from this */

  /* Light theme */
  --background: #F5F5F2;
  --background-alt: #ECEBE7;
  --foreground: #0A0A0A;
  --card: #FFFFFF;
  --card-foreground: #0A0A0A;
  --popover: #FFFFFF;
  --popover-foreground: #0A0A0A;
  --primary: #0A0A0A;            /* orange fails as text on light, so buttons are black here */
  --primary-foreground: #F5F5F2;
  --secondary: #ECEBE7;
  --secondary-foreground: #0A0A0A;
  --muted: #ECEBE7;
  --muted-foreground: #62665F;
  --accent: #ECEBE7;
  --accent-foreground: #0A0A0A;
  --destructive: #B4232F;
  --destructive-foreground: #F5F5F2;
  --border: #DADAD6;
  --input: #DADAD6;
  --ring: #0A0A0A;
  --chart-1: #FF6A13;
  --chart-2: #0A0A0A;
  --chart-3: #2456B5;
  --chart-4: #1D7A4B;
  --chart-5: #62665F;
  --sidebar: #F5F5F2;
  --sidebar-foreground: #0A0A0A;
  --sidebar-primary: #FF6A13;
  --sidebar-primary-foreground: #0A0A0A;
  --sidebar-accent: #ECEBE7;
  --sidebar-accent-foreground: #0A0A0A;
  --sidebar-border: #DADAD6;
  --sidebar-ring: #0A0A0A;
}

/* Dark theme — Nine's default */
html.dark {
  --background: #242424;
  --background-alt: #1E1E1E;
  --foreground: #F5F5F2;
  --side-panel-fg: #F5F5F2;
  --card: #323232;
  --card-foreground: #F5F5F2;
  --popover: #323232;
  --popover-foreground: #F5F5F2;
  --primary: #FF6A13;            /* the one orange signal: main buttons */
  --primary-foreground: #0A0A0A; /* text on orange is always black */
  --bubble-agent: #2B2B2B;
  --secondary: #3C3C3C;
  --secondary-foreground: #F5F5F2;
  --muted: #323232;
  --muted-highlight: #3C3C3C;
  --muted-foreground: #9E9E9E;
  --accent: #3C3C3C;
  --accent-foreground: #F5F5F2;
  --destructive: #B4232F;
  --destructive-foreground: #F5F5F2;
  --border: #3D3D3D;
  --input: #3D3D3D;
  --ring: #F5F5F2;
  --chart-1: #FF6A13;
  --chart-2: #F5F5F2;
  --chart-3: #8DB6FF;
  --chart-4: #5CD49B;
  --chart-5: #9E9E9E;
  --sidebar: #242424;
  --sidebar-foreground: #F5F5F2;
  --sidebar-primary: #FF6A13;
  --sidebar-primary-foreground: #0A0A0A;
  --sidebar-accent: #3C3C3C;
  --sidebar-accent-foreground: #F5F5F2;
  --sidebar-border: #3D3D3D;
  --sidebar-ring: #F5F5F2;
}

/* Arabic text gets Alexandria and a taller line height */
:lang(ar), [dir="rtl"] {
  font-family: "Alexandria", "Manrope", system-ui, sans-serif;
  line-height: 1.75;
}