/*
  globals.css
  spboucher.ai Web
  Author: Simon-Pierre Boucher
  Mail: contact@spboucher.ai
*/

@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));

/* "Quantitative editorial" palette — warm paper, ink, one indigo accent. */
:root {
  --background: oklch(0.972 0.006 85);
  --foreground: oklch(0.245 0.016 75);
  --card: oklch(0.993 0.0035 85);
  --card-foreground: oklch(0.245 0.016 75);
  --muted: oklch(0.944 0.008 85);
  --muted-foreground: oklch(0.475 0.022 78);
  --primary: oklch(0.44 0.155 268);
  --primary-foreground: oklch(0.985 0.004 85);
  --secondary: oklch(0.933 0.01 85);
  --secondary-foreground: oklch(0.3 0.02 75);
  --accent: oklch(0.928 0.012 85);
  --accent-foreground: oklch(0.3 0.02 75);
  --border: oklch(0.878 0.014 82);
  --ring: oklch(0.44 0.155 268);
  --aura-a: oklch(0.44 0.155 268 / 5%);
  --aura-b: oklch(0.62 0.09 60 / 5%);
}

.dark {
  --background: oklch(0.185 0.008 75);
  --foreground: oklch(0.925 0.01 85);
  --card: oklch(0.223 0.01 78);
  --card-foreground: oklch(0.925 0.01 85);
  --muted: oklch(0.258 0.012 78);
  --muted-foreground: oklch(0.7 0.018 82);
  --primary: oklch(0.73 0.115 268);
  --primary-foreground: oklch(0.185 0.008 75);
  --secondary: oklch(0.273 0.014 78);
  --secondary-foreground: oklch(0.925 0.01 85);
  --accent: oklch(0.285 0.014 78);
  --accent-foreground: oklch(0.925 0.01 85);
  --border: oklch(0.302 0.014 78);
  --ring: oklch(0.73 0.115 268);
  --aura-a: oklch(0.73 0.115 268 / 7%);
  --aura-b: oklch(0.65 0.08 60 / 4%);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-border: var(--border);
  --color-ring: var(--ring);
  --font-sans: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
  --font-display: var(--font-fraunces), "Iowan Old Style", Georgia, serif;
  --font-mono: var(--font-plex-mono), ui-monospace, "SF Mono", Menlo, monospace;
  --radius-4xl: 1.75rem;
  --shadow-soft: 0 1px 2px oklch(0.245 0.016 75 / 4%);
  --shadow-lift: 0 1px 2px oklch(0.245 0.016 75 / 5%),
    0 12px 28px -14px oklch(0.245 0.016 75 / 14%);
  --shadow-glow: 0 0 0 1px oklch(0.44 0.155 268 / 8%),
    0 10px 32px -10px oklch(0.44 0.155 268 / 14%);
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Ambient auras behind the whole site — quiet, fixed, and theme-aware. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -10;
  pointer-events: none;
  background:
    radial-gradient(56rem 30rem at 88% -6%, var(--aura-a), transparent 60%),
    radial-gradient(48rem 26rem at -4% 4%, var(--aura-b), transparent 55%),
    radial-gradient(60rem 32rem at 50% 110%, var(--aura-b), transparent 60%);
}

/* Faint graph-paper grid above the auras — the econometrician's backdrop —
   faded out toward the lower half of the viewport so content stays quiet. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -9;
  pointer-events: none;
  background-image:
    linear-gradient(to right, oklch(0.44 0.155 268 / 6%) 1px, transparent 1px),
    linear-gradient(to bottom, oklch(0.44 0.155 268 / 6%) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(64rem 36rem at 72% -10%, black 12%, transparent 70%);
}

.dark body::after {
  background-image:
    linear-gradient(to right, oklch(0.73 0.115 268 / 7%) 1px, transparent 1px),
    linear-gradient(to bottom, oklch(0.73 0.115 268 / 7%) 1px, transparent 1px);
}

/* Subtle, theme-aware scrollbar. */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-thumb {
  border-radius: 9999px;
  border: 3px solid var(--background);
  background-color: color-mix(in oklch, var(--muted-foreground) 35%, transparent);
}
::-webkit-scrollbar-thumb:hover {
  background-color: color-mix(in oklch, var(--muted-foreground) 55%, transparent);
}

::selection {
  background: oklch(0.44 0.155 268 / 16%);
}

/* Framer Motion reveals bake opacity:0 into SSR inline styles; guarantee
   visibility when animations cannot run (reduced motion or JS disabled). */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}