index.css

@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";

/* Tailwind 4: ensure auth-page build scans shared UI/components. */
@source "../**/*.{ts,tsx,js,jsx,html}";

/* import custom styles */
@import "./vars.css";
@import "./animations.css";
@import "./utils.css";

@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/InterVariable.ttf") format("truetype-variations");
}

@font-face {
  font-family: "Inter Variable";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/InterVariable-Italic.ttf") format("truetype-variations");
}

@font-face {
  font-family: "GT America Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/GT-America-Mono-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "GT America Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/GT-America-Mono-Medium.woff2") format("woff2");
}

/* https://tailwindcss.com/docs/adding-custom-styles#adding-custom-variants */
@custom-variant dark (&:is(.dark *));

/* lucide defaults + opt-in overrides */
:root {
  --icon-stroke-width: 1.5;
}
.lucide {
  stroke-width: var(--lucide-stroke-width, var(--icon-stroke-width));
}

/*
  Learn Tailwind 4
  https://tailwindcss.com/docs/adding-custom-styles
  https://tailwindcss.com/docs/functions-and-directives  
  https://tailwindcss.com/docs/theme#default-theme-variable-reference

  Default breakpoints:
  sm	40rem (640px)
  md	48rem (768px)
  lg	64rem (1024px)
  xl	80rem (1280px)
  2xl	96rem (1536px)

  NB! Use "inline" when defining theme variables that reference other variables:
  https://tailwindcss.com/docs/theme#using-your-theme-variables
 */

@theme inline {
  --font-sans: "Inter Variable", sans-serif;
  --font-mono:
    /* "GT America Mono", */
    ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;

  /* custom font weights */
  --font-weight-semibold: 550;

  /* text sizes */
  /* --text-* is a theme variable namespace that controls text-* utilities, and Tailwind only registers those when they’re defined via @theme. inline is explicitly required when a theme variable references another variable, which your alias lines do (e.g. --text-sm: var(--text-small)). */
  --text-pill: 10px;
  --text-fine: 11.5px;
  --text-compact: 13px;
  --text-small: 14px;
  --text-body: 15px;
  --text-button: 15px;
  --text-large: 17px;
  --text-xlarge: 21px;
  --text-heading: 24px;
  --text-subtitle: 27px;
  --text-title: 32px;
  --text-display: 40px;
  --text-hero: 54px;
  /* tailwind aliases → semantic tokens */
  --text-xs: var(--text-fine);
  --text-sm: var(--text-small);
  --text-lg: var(--text-large);
  --text-xl: var(--text-xlarge);
  --text-2xl: var(--text-heading);
  --text-3xl: var(--text-subtitle);
  --text-4xl: var(--text-title);
  --text-5xl: var(--text-display);
  --text-6xl: var(--text-hero);
  --text-7xl: var(--text-hero);
  --text-8xl: var(--text-hero);
  --text-9xl: var(--text-hero);

  /* text line-height */
  --default-line-height: calc(24 / 17);
  --text-pill--line-height: 1;
  --text-fine--line-height: var(--default-line-height);
  --text-small--line-height: var(--default-line-height);
  --text-body--line-height: var(--default-line-height);
  --text-button--line-height: var(--default-line-height);
  --text-large--line-height: var(--default-line-height);
  --text-xlarge--line-height: 1.3;
  --text-heading--line-height: 1.25;
  --text-subtitle--line-height: 1.25;
  --text-title--line-height: 1.1;
  --text-display--line-height: 1;
  --text-hero--line-height: 1;
  /* tailwind aliases → semantic tokens */
  --text-sm--line-height: var(--text-small--line-height);
  --text-lg--line-height: var(--text-large--line-height);
  --text-xl--line-height: var(--text-xlarge--line-height);
  --text-2xl--line-height: var(--text-heading--line-height);
  --text-3xl--line-height: var(--text-subtitle--line-height);
  --text-4xl--line-height: var(--text-title--line-height);
  --text-5xl--line-height: var(--text-display--line-height);
  --text-6xl--line-height: var(--text-hero--line-height);
  --text-7xl--line-height: var(--text-hero--line-height);
  --text-8xl--line-height: var(--text-hero--line-height);
  --text-9xl--line-height: var(--text-hero--line-height);

  /* text letter-spacing (0 is default) */
  --text-pill--letter-spacing: 0.025em;
  --text-fine--letter-spacing: 0.0175em;
  --text-xlarge--letter-spacing: -0.01em;
  --text-heading--letter-spacing: -0.01em;
  --text-subtitle--letter-spacing: -0.01em;
  --text-title--letter-spacing: -0.01em;
  --text-display--letter-spacing: -0.015em;
  --text-hero--letter-spacing: -0.02em;
  /* tailwind aliases → semantic tokens */
  --text-xl--letter-spacing: var(--text-xlarge--letter-spacing);
  --text-2xl--letter-spacing: var(--text-heading--letter-spacing);
  --text-3xl--letter-spacing: var(--text-subtitle--letter-spacing);
  --text-4xl--letter-spacing: var(--text-title--letter-spacing);
  --text-5xl--letter-spacing: var(--text-display--letter-spacing);
  --text-6xl--letter-spacing: var(--text-hero--letter-spacing);
  --text-7xl--letter-spacing: var(--text-hero--letter-spacing);
  --text-8xl--letter-spacing: var(--text-hero--letter-spacing);
  --text-9xl--letter-spacing: var(--text-hero--letter-spacing);

  /* radius */
  --radius-soft: calc(var(--radius) / 3);
  --radius-button: calc(var(--radius) - 4px);
  --radius-card: var(--radius);
  --radius-squish: calc(var(--radius) * 1.333);
  --radius-dialog: calc(var(--radius) * 2.667);

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);
  --radius-3xl: calc(var(--radius) + 12px);
  --radius-4xl: calc(var(--radius) + 16px);

  /* spacing */
  --spacing-em: 1em;
  --spacing-lh: 1lh;
  --spacing-inset: 30px;
  --spacing-nav: 62px;
  --spacing-header: 60px;
  --spacing-footer: 96px;
  --spacing-tab: 54px;
  --spacing-row: 64px;
  --spacing-banner: 40px;
  --spacing-bar: 32px;
  --spacing-button: 44px;
  --spacing-button-xs: 25px;
  --spacing-row-gutter: 16px;
  --spacing-mobile-width: 480px;
  --spacing-desktop-width: 580px;
  --spacing-wide-width: 960px;
  --spacing-panel-width: 520px;

  --spacing-w4: clamp(10.5px, 6.5714px + 0.7857vw, 16px);
  --spacing-w5: clamp(12px, 6.2857px + 1.1429vw, 20px);
  --spacing-w6: clamp(16px, 10.2857px + 1.1429vw, 24px);
  --spacing-w8: clamp(21px, 13.1429px + 1.5714vw, 32px);
  --spacing-w10: clamp(28px, 19.4286px + 1.7143vw, 40px);
  --spacing-w12: clamp(32px, 20.5714px + 2.2857vw, 48px);
  --spacing-w16: clamp(43px, 28px + 3vw, 64px);
  --spacing-w20: clamp(54px, 35.4286px + 3.7143vw, 80px);
  --spacing-w24: clamp(64px, 41.1429px + 4.5714vw, 96px);
  --spacing-w28: clamp(75px, 48.5714px + 5.2857vw, 112px);
  --spacing-w32: clamp(85px, 54.2857px + 6.1429vw, 128px);
  --spacing-w36: clamp(96px, 61.7143px + 6.8571vw, 144px);
  --spacing-w42: clamp(112px, 72px + 8vw, 168px);
  --spacing-w48: clamp(128px, 82.2857px + 9.1429vw, 192px);
  --spacing-w64: clamp(171px, 110.2857px + 12.1429vw, 256px);
  --spacing-w72: clamp(192px, 123.4286px + 13.7143vw, 288px);
  --spacing-w96: clamp(256px, 164.5714px + 18.2857vw, 384px);

  --spacing-gap: var(--spacing-w4);
  --spacing-small: var(--spacing-w8);
  --spacing-minor: var(--spacing-w12);
  --spacing-submajor: var(--spacing-w16);
  --spacing-major: var(--spacing-w24);
  --spacing-super: var(--spacing-w48);

  /* colors */
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-foreground-dim: var(--foreground-11);
  --color-foreground-muted: var(--muted-foreground);

  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);

  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-destructive-reversed: var(--destructive-reversed);
  --color-success: var(--success);
  --color-success-foreground: var(--success-foreground);
  --color-success-reversed: var(--success-reversed);
  --color-warning: var(--warning);
  --color-warning-foreground: var(--warning-foreground);
  --color-warning-reversed: var(--warning-reversed);

  --color-iris: var(--vana-blue);
  --color-irisLight: var(--vana-blueLight);
  --color-stonebeige: var(--stonebeige);
  --color-dc: var(--dc-accent);
  --color-dc-foreground: color-mix(in oklab, var(--dc-accent) 85%, black 15%);

  --color-accent-canvas: var(--accent-1);
  --color-accent-subtle: var(--accent-2);
  --color-accent-surface: var(--accent-3);
  --color-accent-surface-hover: var(--accent-4);
  --color-accent-surface-active: var(--accent-5);
  --color-accent-border: var(--accent-6);
  --color-accent: var(--accent-9);
  --color-accent-foreground-dim: var(--accent-11);
  --color-accent-foreground: var(--accent-12);

  --color-sidebar-ring: var(--sidebar-ring);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar: var(--sidebar);
  --color-chart-5: var(--chart-5);
  --color-chart-4: var(--chart-4);
  --color-chart-3: var(--chart-3);
  --color-chart-2: var(--chart-2);
  --color-chart-1: var(--chart-1);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-secondary: var(--secondary);
  --color-primary-foreground: var(--primary-foreground);
  --color-primary: var(--primary);
  --color-primary-50: #f0f9ff;
  --color-primary-100: #e0f2fe;
  --color-primary-200: #bae6fd;
  --color-primary-300: #7dd3fc;
  --color-primary-400: #38bdf8;
  --color-primary-500: #0ea5e9;
  --color-primary-600: #0284c7;
  --color-primary-700: #0369a1;
  --color-primary-800: #075985;
  --color-primary-900: #0c4a6e;
  --color-popover-foreground: var(--popover-foreground);
  --color-popover: var(--popover);
  --color-card-foreground: var(--card-foreground);
  --color-card: var(--card);
}

@media (max-width: 480px) {
  :root {
    --spacing-inset: 15px;
  }
}

/* The base layer is the low-precedence global default so components/utilities can override when needed */
@layer base {
  :root {
    /* Runtime default for banner offset. Overridden by global-banner.tsx. */
    --banner-offset: 0px;
    /* Compute sticky headers with reference to `--banner-offset` which is dynamically set in global-banner.tsx. */
    --spacing-nav-with-banner: calc(
      var(--spacing-nav, 62px) + var(--banner-offset, 0px)
    );
  }
  * {
    @apply border-border outline-ring/50;
    min-width: 0; /* Fix flexbox shrinking bug */
    min-height: 0; /* Prevents vertical overflow in flex-col layouts */
    scrollbar-width: thin;
  }
  ::selection {
    @apply bg-foreground text-background;
  }
  html {
    @apply bg-background text-foreground;
    @apply font-sans;
    @apply scroll-smooth; /* Smooth scrolling everywhere */
    height: 100%;
    overflow-y: scroll; /* Force scrollbar to prevent layout shift; makes html the scroll container for sticky */
  }
  body {
    @apply bg-muted text-foreground;
    @apply text-body font-sans font-normal antialiased;
    /* transition everywhere: do NOT use tailwind's @apply here as the variables are inherited on every child transition */
    transition:
      color var(--motion-lg) var(--ease-standard),
      opacity var(--motion-lg) var(--ease-standard);
  }
}