viz/app/styles/globals.css
@import "tw-animate-css";

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: oklch(1 0 0);
    --foreground: oklch(0.1898 0.0094 255.6333);
    --card: oklch(1 0 0);
    --card-foreground: oklch(0.1898 0.0094 255.6333);
    --popover: oklch(1 0 0);
    --popover-foreground: oklch(0.1898 0.0094 255.6333);
    --primary: oklch(0.1898 0.0094 255.6333);
    --primary-foreground: oklch(0.9761 0 0);
    --secondary: oklch(0.9065 0.0029 264.5412);
    --secondary-foreground: oklch(0.4761 0.0268 260.6595);
    --muted: oklch(0.9065 0.0029 264.5412);
    --muted-foreground: oklch(0.4761 0.0268 260.6595);
    --accent: oklch(0.9681 0.0183 232.5029);
    --accent-foreground: oklch(0.6539 0.1893 252.737);
    --destructive: oklch(0.6089 0.1999 33.3503);
    --destructive-foreground: oklch(1 0 0);
    --border: oklch(0.9494 0.0013 286.3746);
    --input: oklch(0.9065 0.0029 264.5412);
    --ring: oklch(0.7752 0.0109 261.7847);
    --chart-1: oklch(0.7991 0.111 242.3453);
    --chart-2: oklch(0.8549 0.1251 125.3599);
    --chart-3: oklch(0.8088 0.0982 8.3044);
    --chart-4: oklch(0.8755 0.1568 89.3348);
    --chart-5: oklch(0.8112 0.1013 293.5712);
    --sidebar: oklch(0.9761 0 0);
    --sidebar-foreground: oklch(0.1898 0.0094 255.6333);
    --sidebar-primary: oklch(0.1898 0.0094 255.6333);
    --sidebar-primary-foreground: oklch(0.9761 0 0);
    --sidebar-accent: oklch(0.9065 0.0029 264.5412);
    --sidebar-accent-foreground: oklch(0.1898 0.0094 255.6333);
    --sidebar-border: oklch(0.9065 0.0029 264.5412);
    --sidebar-ring: oklch(0.7752 0.0109 261.7847);
    --font-sans: Inter, ui-sans-serif, sans-serif, system-ui;
    --font-serif: Arvo, ui-serif, serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
      "Liberation Mono", "Courier New", monospace;
    --radius: 0.575rem;
    --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0);
    --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0);
    --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0), 0 1px 2px -1px hsl(0 0% 0% / 0);
    --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0), 0 1px 2px -1px hsl(0 0% 0% / 0);
    --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0), 0 2px 4px -1px hsl(0 0% 0% / 0);
    --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0), 0 4px 6px -1px hsl(0 0% 0% / 0);
    --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0),
      0 8px 10px -1px hsl(0 0% 0% / 0);
    --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0);
    --tracking-normal: 0em;
    --spacing: 0.25rem;
  }

  .dark {
    --background: oklch(0.145 0 0);
    --foreground: oklch(0.985 0 0);
    --card: oklch(0.205 0 0);
    --card-foreground: oklch(0.985 0 0);
    --popover: oklch(0.269 0 0);
    --popover-foreground: oklch(0.985 0 0);
    --primary: oklch(0.922 0 0);
    --primary-foreground: oklch(0.205 0 0);
    --secondary: oklch(0.269 0 0);
    --secondary-foreground: oklch(0.985 0 0);
    --muted: oklch(0.269 0 0);
    --muted-foreground: oklch(0.708 0 0);
    --accent: oklch(0.371 0 0);
    --accent-foreground: oklch(0.985 0 0);
    --destructive: oklch(0.704 0.191 22.216);
    --destructive-foreground: oklch(0.985 0 0);
    --border: oklch(0.275 0 0);
    --input: oklch(0.325 0 0);
    --ring: oklch(0.556 0 0);
    --chart-1: oklch(0.81 0.1 252);
    --chart-2: oklch(0.62 0.19 260);
    --chart-3: oklch(0.55 0.22 263);
    --chart-4: oklch(0.49 0.22 264);
    --chart-5: oklch(0.42 0.18 266);
    --sidebar: oklch(0.205 0 0);
    --sidebar-foreground: oklch(0.985 0 0);
    --sidebar-primary: oklch(0.488 0.243 264.376);
    --sidebar-primary-foreground: oklch(0.985 0 0);
    --sidebar-accent: oklch(0.269 0 0);
    --sidebar-accent-foreground: oklch(0.985 0 0);
    --sidebar-border: oklch(0.275 0 0);
    --sidebar-ring: oklch(0.439 0 0);
    --font-sans: Inter, ui-sans-serif, sans-serif, system-ui;
    --font-serif: Arvo, ui-serif, serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
      "Liberation Mono", "Courier New", monospace;
    --radius: 0.575rem;
    --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0);
    --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0);
    --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0), 0 1px 2px -1px hsl(0 0% 0% / 0);
    --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0), 0 1px 2px -1px hsl(0 0% 0% / 0);
    --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0), 0 2px 4px -1px hsl(0 0% 0% / 0);
    --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0), 0 4px 6px -1px hsl(0 0% 0% / 0);
    --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0),
      0 8px 10px -1px hsl(0 0% 0% / 0);
    --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0);
  }
}

@layer base {
  :root {
    /* Responsive typography and spacing */
    --responsive-text-xs: clamp(0.45rem, 1.62vw, 0.675rem);
    --responsive-text-sm: clamp(0.5625rem, 1.8vw, 0.7875rem);
    --responsive-text-base: clamp(0.675rem, 1.98vw, 0.9rem);
    --responsive-text-lg: clamp(0.7875rem, 2.16vw, 1.0125rem);
    --responsive-text-xl: clamp(0.9rem, 2.52vw, 1.125rem);
    --responsive-text-2xl: clamp(1.0125rem, 2.88vw, 1.35rem);
    --responsive-text-3xl: clamp(1.125rem, 3.24vw, 1.6875rem);
    --responsive-text-4xl: clamp(1.35rem, 3.78vw, 2.025rem);
    --responsive-text-5xl: clamp(1.575rem, 4.5vw, 2.7rem);
    --responsive-text-6xl: clamp(1.8rem, 5.4vw, 3.375rem);
    --responsive-text-7xl: clamp(2.25rem, 6.3vw, 4.05rem);
    --responsive-text-8xl: clamp(2.7rem, 7.2vw, 5.4rem);
    --responsive-text-9xl: clamp(3.15rem, 8.1vw, 7.2rem);

    --responsive-slide-text-title: clamp(2.1rem, 9vw, 7rem);
    --responsive-slide-text-heading1: clamp(1.4rem, 6vw, 4.5rem);

    --responsive-space-1: clamp(0.075rem, 0.25vw, 0.25rem);
    --responsive-space-2: clamp(0.125rem, 0.5vw, 0.5rem);
    --responsive-space-3: clamp(0.25rem, 0.75vw, 0.75rem);
    --responsive-space-4: clamp(0.375rem, 1vw, 1rem);
    --responsive-space-6: clamp(0.5rem, 1.5vw, 1.5rem);
    --responsive-space-8: clamp(0.75rem, 2vw, 2rem);
    --responsive-space-12: clamp(1rem, 3vw, 3rem);
    --responsive-space-16: clamp(1.5rem, 4vw, 4rem);
    --responsive-space-20: clamp(2rem, 5vw, 5rem);
    --responsive-space-24: clamp(2.5rem, 6vw, 6rem);

    --slide-cover-foreground: 220 9% 7%; /* #111418 */
    --slide-content-text: 220 12% 37%; /* #545D6C */
  }

  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

@layer utilities {
  .leading-96p {
    line-height: 0.96;
  } /* 0.96 × font-size  */

  .leading-103p {
    line-height: 1.03;
  } /* 1.03 × font-size  */

  .leading-123p {
    line-height: 1.23;
  } /* 1.23 × font-size  */

  .leading-140p {
    line-height: 1.4;
  } /* 1.40 × font-size  */
}

@layer components {
  /* Responsive typography and spacing utilities - opt-in for any component */
  .responsive-text .text-xs {
    font-size: var(--responsive-text-xs);
  }
  .responsive-text .text-sm {
    font-size: var(--responsive-text-sm);
  }
  .responsive-text .text-base {
    font-size: var(--responsive-text-base);
  }
  .responsive-text .text-lg {
    font-size: var(--responsive-text-lg);
  }
  .responsive-text .text-xl {
    font-size: var(--responsive-text-xl);
  }
  .responsive-text .text-2xl {
    font-size: var(--responsive-text-2xl);
  }
  .responsive-text .text-3xl {
    font-size: var(--responsive-text-3xl);
  }
  .responsive-text .text-4xl {
    font-size: var(--responsive-text-4xl);
  }
  .responsive-text .text-5xl {
    font-size: var(--responsive-text-5xl);
  }
  .responsive-text .text-6xl {
    font-size: var(--responsive-text-6xl);
  }
  .responsive-text .text-7xl {
    font-size: var(--responsive-text-7xl);
  }
  .responsive-text .text-8xl {
    font-size: var(--responsive-text-8xl);
  }
  .responsive-text .text-9xl {
    font-size: var(--responsive-text-9xl);
  }

  .responsive-text .gap-1 {
    gap: var(--responsive-space-1);
  }
  .responsive-text .gap-2 {
    gap: var(--responsive-space-2);
  }
  .responsive-text .gap-3 {
    gap: var(--responsive-space-3);
  }
  .responsive-text .gap-4 {
    gap: var(--responsive-space-4);
  }
  .responsive-text .gap-6 {
    gap: var(--responsive-space-6);
  }
  .responsive-text .gap-8 {
    gap: var(--responsive-space-8);
  }
  .responsive-text .gap-12 {
    gap: var(--responsive-space-12);
  }
  .responsive-text .gap-16 {
    gap: var(--responsive-space-16);
  }

  .responsive-text .space-y-1 > * + * {
    margin-top: var(--responsive-space-1);
  }
  .responsive-text .space-y-2 > * + * {
    margin-top: var(--responsive-space-2);
  }
  .responsive-text .space-y-3 > * + * {
    margin-top: var(--responsive-space-3);
  }
  .responsive-text .space-y-4 > * + * {
    margin-top: var(--responsive-space-4);
  }
  .responsive-text .space-y-6 > * + * {
    margin-top: var(--responsive-space-6);
  }
  .responsive-text .space-y-8 > * + * {
    margin-top: var(--responsive-space-8);
  }
  .responsive-text .space-y-12 > * + * {
    margin-top: var(--responsive-space-12);
  }

  .responsive-text .mt-1 {
    margin-top: var(--responsive-space-1);
  }
  .responsive-text .mt-2 {
    margin-top: var(--responsive-space-2);
  }
  .responsive-text .mt-3 {
    margin-top: var(--responsive-space-3);
  }
  .responsive-text .mt-4 {
    margin-top: var(--responsive-space-4);
  }
  .responsive-text .mt-6 {
    margin-top: var(--responsive-space-6);
  }
  .responsive-text .mt-8 {
    margin-top: var(--responsive-space-8);
  }
  .responsive-text .mt-12 {
    margin-top: var(--responsive-space-12);
  }
  .responsive-text .mt-16 {
    margin-top: var(--responsive-space-16);
  }

  .responsive-text .mb-1 {
    margin-bottom: var(--responsive-space-1);
  }
  .responsive-text .mb-2 {
    margin-bottom: var(--responsive-space-2);
  }
  .responsive-text .mb-3 {
    margin-bottom: var(--responsive-space-3);
  }
  .responsive-text .mb-4 {
    margin-bottom: var(--responsive-space-4);
  }
  .responsive-text .mb-6 {
    margin-bottom: var(--responsive-space-6);
  }
  .responsive-text .mb-8 {
    margin-bottom: var(--responsive-space-8);
  }
  .responsive-text .mb-12 {
    margin-bottom: var(--responsive-space-12);
  }

  .responsive-text .p-1 {
    padding: var(--responsive-space-1);
  }
  .responsive-text .p-2 {
    padding: var(--responsive-space-2);
  }
  .responsive-text .p-3 {
    padding: var(--responsive-space-3);
  }
  .responsive-text .p-4 {
    padding: var(--responsive-space-4);
  }
  .responsive-text .p-6 {
    padding: var(--responsive-space-6);
  }
  .responsive-text .p-8 {
    padding: var(--responsive-space-8);
  }
  .responsive-text .p-12 {
    padding: var(--responsive-space-12);
  }

  /* Slide variant padding */
  .slide-top-padding {
    padding: var(--responsive-space-8);
    padding-top: var(--responsive-space-12);
  }
  .slide-centered-padding {
    padding: var(--responsive-space-8);
  }

  .slide-cover-light {
    @apply bg-background;
    color: hsl(var(--slide-cover-foreground));
  }

  .slide-cover-dark {
    background-color: hsl(var(--slide-cover-foreground));
    color: #ffffff;
  }

  .slide-cover-light .slide-title {
    @apply text-black;
  }

  .slide-cover-dark .slide-title {
    @apply text-white;
  }

  .slide-title {
    font-size: var(--responsive-slide-text-title);
  }

  .slide-heading1 {
    @apply leading-tight m-0 break-normal hyphens-none leading-96p;
    font-size: var(--responsive-slide-text-heading1);
    font-family: var(--font-inter);
  }

  .slide-heading2 {
    @apply leading-tight m-0 break-normal text-7xl hyphens-none leading-103p;
    font-family: var(--font-inter);
  }

  .slide-content {
    color: hsl(var(--slide-content-text));
  }

  /* Chart axis styling for better visibility in slideshows */
  .responsive-text .recharts-cartesian-axis-tick text {
    font-size: 14px;
    font-weight: 600;
  }
}
