/* Design tokens extracted from the Aside reference page (Tailwind v4 + shadcn).
   Light theme only: the page ships no dark-theme values. */

@import "./fonts/fonts.css";
@import "./palette.css";

:root {
  /* Semantic colors */
  --card: #fff;
  --card-foreground: #0a0a0a;
  --popover: #fff;
  --popover-foreground: #0a0a0a;
  --primary: var(--color-mist-950);
  --primary-foreground: #fafafa;
  --secondary: #f5f5f5;
  --secondary-foreground: #171717;
  --muted: #f5f5f5;
  --muted-foreground: var(--color-neutral-500);
  --accent: #f5f5f5;
  --accent-foreground: #171717;
  --destructive: #e40014;
  --brand: var(--color-sky-500);
  --brand-content: var(--color-sky-600);
  --border: #e5e5e5;
  --input: #e5e5e5;
  --ring: #a1a1a1;
  --chart-1: #d4d4d4;
  --chart-2: #737373;
  --chart-3: #525252;
  --chart-4: #404040;
  --chart-5: #262626;
  --radius: .625rem;
  --sidebar: #fafafa;
  --sidebar-foreground: #0a0a0a;
  --sidebar-primary: #171717;
  --sidebar-primary-foreground: #fafafa;
  --sidebar-accent: #f5f5f5;
  --sidebar-accent-foreground: #171717;
  --sidebar-border: #e5e5e5;
  --sidebar-ring: #a1a1a1;
  --background: #fff;
  --foreground: var(--color-mist-950);
  --web-content-background: var(--background);

  /* Surfaces (translucent layers) */
  --surface-primary: #fff;
  --surface-secondary: #ffffffd9;
  --surface-tertiary: #ffffff8c;
  --surface-primary-foreground: #0a0a0ad9;
  --surface-secondary-foreground: #0a0a0a8c;
  --surface-tertiary-foreground: #0a0a0a40;
  --border-surface: #0a0a0a1a;
  --border-surface-strong: #0a0a0a26;

  /* Spacing, layout, type, radius, effects */
  --spacing: .25rem;
  --breakpoint-sm: 40rem;
  --breakpoint-md: 48rem;
  --breakpoint-xl: 80rem;
  --breakpoint-2xl: 96rem;
  --container-xs: 20rem;
  --container-sm: 24rem;
  --container-md: 28rem;
  --container-lg: 32rem;
  --container-xl: 36rem;
  --container-2xl: 42rem;
  --container-3xl: 48rem;
  --container-4xl: 56rem;
  --text-xs: .75rem;
  --text-xs--line-height: calc(1/.75);
  --text-sm: .875rem;
  --text-sm--line-height: calc(1.25/.875);
  --text-base: 1rem;
  --text-base--line-height: calc(1.5/1);
  --text-lg: 1.125rem;
  --text-lg--line-height: calc(1.75/1.125);
  --text-xl: 1.25rem;
  --text-xl--line-height: calc(1.75/1.25);
  --text-2xl: 1.5rem;
  --text-2xl--line-height: calc(2/1.5);
  --text-3xl: 1.875rem;
  --text-3xl--line-height: calc(2.25/1.875);
  --text-4xl: 2.25rem;
  --text-4xl--line-height: calc(2.5/2.25);
  --text-5xl: 3rem;
  --text-5xl--line-height: 1;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --tracking-tight: -.025em;
  --tracking-normal: 0em;
  --tracking-wide: .025em;
  --tracking-widest: .1em;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --radius-xs: .125rem;
  --radius-md: calc(.375rem * var(--squircle-factor));
  --radius-lg: calc(.5rem * var(--squircle-factor));
  --radius-xl: calc(.75rem * var(--squircle-factor));
  --radius-2xl: calc(1rem * var(--squircle-factor));
  --radius-3xl: calc(1.5rem * var(--squircle-factor));
  --drop-shadow-sm: 0 1px 2px #00000026;
  --ease-out: cubic-bezier(0,0,.2,1);
  --blur-xs: 4px;
  --blur-sm: 8px;
  --blur-md: 12px;
  --blur-lg: 16px;
  --blur-xl: 24px;
  --blur-3xl: 64px;
  --aspect-video: 16/9;
  --default-transition-duration: .15s;
  --default-transition-timing-function: cubic-bezier(.4,0,.2,1);
  /* Radii above are scaled by this; pair them with corner-shape: superellipse(var(--squircle-factor)). */
  --squircle-factor: 1.4;
}