apps/web/app/globals.css - main - githubmirror/Front-End-Checklist

apps/web/app/globals.css
1 616 строк41 KB
David Dias
feat: add GitHub profile sync
30 май 2026, 05:19
30 май 2026, 05:19ca95dc6
@import "tailwindcss";

/* =============================================================================
   Cursor Pointer Fix for Tailwind v4
   Tailwind v4 changed button cursor to 'default' to match browser defaults.
   Modern UX expects pointer cursor on clickable elements.
   Placed outside @layer to ensure it overrides Tailwind's preflight.
   ============================================================================= */
button:not(:disabled),
[role="button"]:not(:disabled),
[type="button"]:not(:disabled),
[type="submit"]:not(:disabled),
[type="reset"]:not(:disabled),
summary {
  cursor: pointer;
}

/* =============================================================================
   CSS Variables - Light Mode (Default)
   ============================================================================= */
:root {
  --radius: 0.625rem;

  /* Backgrounds */
  --background: oklch(1 0 0);
  --background-subtle: oklch(0.965 0 0);
  --background-muted: oklch(0.925 0 0);

  /* Foregrounds */
  --foreground: oklch(0.205 0 0);
  --foreground-muted: oklch(0.5 0 0);
  --foreground-subtle: oklch(0.56 0 0);

  /* Borders */
  --border: oklch(0.78 0 0);
  --border-subtle: oklch(0.84 0 0);
  --border-focus: oklch(0.567 0.159 275.208);
  --border-hover: oklch(0.62 0 0);

  /* shadcn standard: primary = accent (Linear purple-blue) */
  --primary: oklch(0.567 0.159 275.208);
  --primary-foreground: oklch(1 0 0);

  /* shadcn standard: secondary */
  --secondary: oklch(0.925 0 0);
  --secondary-foreground: oklch(0.205 0 0);

  /* shadcn standard: muted */
  --muted: oklch(0.925 0 0);
  --muted-foreground: oklch(0.5 0 0);

  /* Accent - Linear purple-blue */
  --accent: oklch(0.567 0.159 275.208);
  --accent-foreground: oklch(1 0 0);
  --accent-hover: oklch(0.513 0.157 274.778);
  --accent-muted: oklch(0.958 0.02 279.873);

  /* shadcn standard: destructive */
  --destructive: oklch(0.637 0.208 25.322);
  --destructive-foreground: oklch(1 0 0);

  /* Card */
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.205 0 0);
  --card-hover: oklch(0.965 0 0);

  /* Popover */
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.205 0 0);

  /* Input */
  --input: oklch(0.84 0 0);
  --input-border: oklch(0.78 0 0);
  --input-focus: oklch(0.567 0.159 275.208);

  /* Ring (focus) */
  --ring: oklch(0.567 0.159 275.208);
  --ring-offset: oklch(1 0 0);

  /* Priority colors - AAA contrast */
  --priority-critical-bg: oklch(0.938 0.03 22.2);
  --priority-critical-text: oklch(0.438 0.176 27.2);
  --priority-critical-border: oklch(0.81 0.081 23.4);

  --priority-high-bg: oklch(0.947 0.04 72.6);
  --priority-high-text: oklch(0.468 0.148 44.2);
  --priority-high-border: oklch(0.838 0.086 70.9);

  --priority-medium-bg: oklch(0.958 0.047 93.5);
  --priority-medium-text: oklch(0.415 0.105 48.6);
  --priority-medium-border: oklch(0.861 0.089 92.1);

  --priority-low-bg: oklch(0.946 0.038 154.1);
  --priority-low-text: oklch(0.44 0.103 151.7);
  --priority-low-border: oklch(0.826 0.074 154.8);

  /* Category colors - AAA contrast */
  --category-html-bg: oklch(0.94 0.045 60);
  --category-html-text: oklch(0.38 0.15 60);
  --category-html-border: oklch(0.83 0.085 60);
  --category-css-bg: oklch(0.94 0.045 240);
  --category-css-text: oklch(0.38 0.15 240);
  --category-css-border: oklch(0.83 0.085 240);
  --category-javascript-bg: oklch(0.94 0.045 90);
  --category-javascript-text: oklch(0.38 0.15 90);
  --category-javascript-border: oklch(0.83 0.085 90);
  --category-performance-bg: oklch(0.94 0.045 295);
  --category-performance-text: oklch(0.38 0.15 295);
  --category-performance-border: oklch(0.83 0.085 295);
  --category-accessibility-bg: oklch(0.94 0.045 335);
  --category-accessibility-text: oklch(0.38 0.15 335);
  --category-accessibility-border: oklch(0.83 0.085 335);
  --category-seo-bg: oklch(0.94 0.045 152);
  --category-seo-text: oklch(0.38 0.15 152);
  --category-seo-border: oklch(0.83 0.085 152);
  --category-images-bg: oklch(0.94 0.045 205);
  --category-images-text: oklch(0.38 0.15 205);
  --category-images-border: oklch(0.83 0.085 205);
  --category-security-bg: oklch(0.94 0.045 18);
  --category-security-text: oklch(0.38 0.15 18);
  --category-security-border: oklch(0.83 0.085 18);
  --category-testing-bg: oklch(0.94 0.045 275);
  --category-testing-text: oklch(0.38 0.15 275);
  --category-testing-border: oklch(0.83 0.085 275);

  /* Status colors */
  --success: oklch(0.723 0.192 149.6);
  --success-foreground: oklch(1 0 0);
  --warning: oklch(0.769 0.165 70.077);
  --warning-foreground: oklch(0 0 0);
  --error: oklch(0.637 0.208 25.322);
  --error-foreground: oklch(1 0 0);

  /* Chart colors */
  --chart-1: oklch(0.567 0.159 275.208);
  --chart-2: oklch(0.723 0.192 149.6);
  --chart-3: oklch(0.769 0.165 70.077);
  --chart-4: oklch(0.637 0.208 25.322);
  --chart-5: oklch(0.556 0 0);

  /* Code block surface (GitHub-style light) */
  --code-bg: #f6f8fa;
  --code-fg: #24292e;
}

/* Dark Mode */
.dark {
  --background: oklch(0.141 0.004 285.766);
  --background-subtle: oklch(0.21 0.006 285.82);
  --background-muted: oklch(0.274 0.005 285.941);

  --foreground: oklch(0.985 0 0);
  --foreground-muted: oklch(0.712 0.013 285.965);
  --foreground-subtle: oklch(0.63 0.014 285.866);

  --border: oklch(1 0 0 / 10%);
  --border-subtle: oklch(0.37 0.012 285.75);
  --border-focus: oklch(0.68 0.158 276.935);
  --border-hover: oklch(0.552 0.014 285.866);

  --primary: oklch(0.68 0.158 276.935);
  --primary-foreground: oklch(0 0 0);

  --secondary: oklch(0.274 0.005 285.941);
  --secondary-foreground: oklch(0.985 0 0);

  --muted: oklch(0.274 0.005 285.941);
  --muted-foreground: oklch(0.712 0.013 285.965);

  --accent: oklch(0.68 0.158 276.935);
  --accent-foreground: oklch(0 0 0);
  --accent-hover: oklch(0.585 0.204 277.12);
  --accent-muted: oklch(0.257 0.086 281.289);

  --destructive: oklch(0.637 0.208 25.322);
  --destructive-foreground: oklch(1 0 0);

  --card: oklch(0.21 0.006 285.82);
  --card-foreground: oklch(0.985 0 0);
  --card-hover: oklch(0.274 0.005 285.941);

  --popover: oklch(0.274 0.005 285.941);
  --popover-foreground: oklch(0.985 0 0);

  --input: oklch(1 0 0 / 15%);
  --input-border: oklch(0.37 0.012 285.75);
  --input-focus: oklch(0.68 0.158 276.935);

  --ring: oklch(0.68 0.158 276.935);
  --ring-offset: oklch(0.141 0.004 285.766);

  --priority-critical-bg: oklch(0.258 0.089 26.033);
  --priority-critical-text: oklch(0.808 0.103 19.539);
  --priority-critical-border: oklch(0.396 0.133 25.714);

  --priority-high-bg: oklch(0.266 0.076 36.249);
  --priority-high-text: oklch(0.837 0.116 66.282);
  --priority-high-border: oklch(0.408 0.116 38.162);

  --priority-medium-bg: oklch(0.286 0.064 53.805);
  --priority-medium-text: oklch(0.879 0.153 91.612);
  --priority-medium-border: oklch(0.414 0.105 45.895);

  --priority-low-bg: oklch(0.266 0.063 152.957);
  --priority-low-text: oklch(0.871 0.136 154.482);
  --priority-low-border: oklch(0.448 0.108 151.35);

  /* Category colors - AAA contrast */
  --category-html-bg: oklch(0.27 0.075 60);
  --category-html-text: oklch(0.87 0.13 60);
  --category-html-border: oklch(0.42 0.11 60);
  --category-css-bg: oklch(0.27 0.075 240);
  --category-css-text: oklch(0.87 0.13 240);
  --category-css-border: oklch(0.42 0.11 240);
  --category-javascript-bg: oklch(0.27 0.075 90);
  --category-javascript-text: oklch(0.87 0.13 90);
  --category-javascript-border: oklch(0.42 0.11 90);
  --category-performance-bg: oklch(0.27 0.075 295);
  --category-performance-text: oklch(0.87 0.13 295);
  --category-performance-border: oklch(0.42 0.11 295);
  --category-accessibility-bg: oklch(0.27 0.075 335);
  --category-accessibility-text: oklch(0.87 0.13 335);
  --category-accessibility-border: oklch(0.42 0.11 335);
  --category-seo-bg: oklch(0.27 0.075 152);
  --category-seo-text: oklch(0.87 0.13 152);
  --category-seo-border: oklch(0.42 0.11 152);
  --category-images-bg: oklch(0.27 0.075 205);
  --category-images-text: oklch(0.87 0.13 205);
  --category-images-border: oklch(0.42 0.11 205);
  --category-security-bg: oklch(0.27 0.075 18);
  --category-security-text: oklch(0.87 0.13 18);
  --category-security-border: oklch(0.42 0.11 18);
  --category-testing-bg: oklch(0.27 0.075 275);
  --category-testing-text: oklch(0.87 0.13 275);
  --category-testing-border: oklch(0.42 0.11 275);

  --success: oklch(0.723 0.192 149.6);
  --success-foreground: oklch(1 0 0);
  --warning: oklch(0.769 0.165 70.077);
  --warning-foreground: oklch(0 0 0);
  --error: oklch(0.637 0.208 25.322);
  --error-foreground: oklch(1 0 0);

  --chart-1: oklch(0.68 0.158 276.935);
  --chart-2: oklch(0.723 0.192 149.6);
  --chart-3: oklch(0.769 0.165 70.077);
  --chart-4: oklch(0.637 0.208 25.322);
  --chart-5: oklch(0.712 0.013 285.965);

  /* Code block surface (GitHub-style dark) */
  --code-bg: #0d1117;
  --code-fg: #e6edf3;
}

/* =============================================================================
   Theme Registration — @theme inline bridges CSS vars to Tailwind utilities
   ============================================================================= */

@theme inline {
  /* Font family */
  --font-sans:
    var(--font-public-sans), ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji";
  --font-code:
    var(--font-fira-code), ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas,
    monospace;
  --font-heading: var(--font-sora);

  /* Fluid typography scale — micro UI fixed (xs, sm), reading/display fluid (base–8xl) */
  --text-xs: 0.75rem;
  --text-xs--line-height: 1rem;
  --text-sm: 0.875rem;
  --text-sm--line-height: 1.25rem;
  --text-base: clamp(0.875rem, 0.8rem + 0.25vw, 1rem);
  --text-base--line-height: 1.6;
  --text-lg: clamp(1rem, 0.95rem + 0.35vw, 1.125rem);
  --text-lg--line-height: 1.5;
  --text-xl: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
  --text-xl--line-height: 1.4;
  --text-2xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --text-2xl--line-height: 1.3;
  --text-3xl: clamp(1.5rem, 1.25rem + 1.25vw, 1.875rem);
  --text-3xl--line-height: 1.25;
  --text-4xl: clamp(1.875rem, 1.5rem + 1.875vw, 2.25rem);
  --text-4xl--line-height: 1.2;
  --text-5xl: clamp(2.25rem, 1.75rem + 2.5vw, 3rem);
  --text-5xl--line-height: 1.15;
  --text-6xl: clamp(3rem, 2.25rem + 3.75vw, 3.75rem);
  --text-6xl--line-height: 1.1;
  --text-7xl: clamp(3.75rem, 2.75rem + 5vw, 4.5rem);
  --text-7xl--line-height: 1.05;
  --text-8xl: clamp(4.5rem, 3.5rem + 5vw, 6rem);
  --text-8xl--line-height: 1.05;

  /* Container widths */
  --container-prose: 65rem;
  --container-content: 80rem;
  --container-wide: 80rem;

  /* Animation timing */
  --animate-duration-fast: 150ms;
  --animate-duration-normal: 200ms;
  --animate-duration-slow: 300ms;

  /* Shadows - subtle, Linear-style */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);

  /* Border radius — single source of truth; components derive from --radius */
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 2px);
  --radius-2xl: calc(var(--radius) + 6px);
  --radius-full: 9999px;

  /* Backgrounds */
  --color-background: var(--background);
  --color-background-subtle: var(--background-subtle);
  --color-background-muted: var(--background-muted);

  /* Foregrounds */
  --color-foreground: var(--foreground);
  --color-foreground-muted: var(--foreground-muted);
  --color-foreground-subtle: var(--foreground-subtle);

  /* Borders */
  --color-border: var(--border);
  --color-border-subtle: var(--border-subtle);
  --color-border-focus: var(--border-focus);
  --color-border-hover: var(--border-hover);

  /* Primary (shadcn standard) */
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);

  /* Secondary (shadcn standard) */
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);

  /* Muted (shadcn standard) */
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);

  /* Accent */
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-accent-hover: var(--accent-hover);
  --color-accent-muted: var(--accent-muted);

  /* Destructive (shadcn standard) */
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);

  /* Card */
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-card-hover: var(--card-hover);

  /* Popover (shadcn standard) */
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);

  /* Input */
  --color-input: var(--input);
  --color-input-border: var(--input-border);
  --color-input-focus: var(--input-focus);

  /* Ring */
  --color-ring: var(--ring);
  --color-ring-offset: var(--ring-offset);

  /* Priority colors */
  --color-priority-critical-bg: var(--priority-critical-bg);
  --color-priority-critical-text: var(--priority-critical-text);
  --color-priority-critical-border: var(--priority-critical-border);

  --color-priority-high-bg: var(--priority-high-bg);
  --color-priority-high-text: var(--priority-high-text);
  --color-priority-high-border: var(--priority-high-border);

  --color-priority-medium-bg: var(--priority-medium-bg);
  --color-priority-medium-text: var(--priority-medium-text);
  --color-priority-medium-border: var(--priority-medium-border);

  --color-priority-low-bg: var(--priority-low-bg);
  --color-priority-low-text: var(--priority-low-text);
  --color-priority-low-border: var(--priority-low-border);

  /* Category colors */
  --color-category-html-bg: var(--category-html-bg);
  --color-category-html-text: var(--category-html-text);
  --color-category-html-border: var(--category-html-border);
  --color-category-css-bg: var(--category-css-bg);
  --color-category-css-text: var(--category-css-text);
  --color-category-css-border: var(--category-css-border);
  --color-category-javascript-bg: var(--category-javascript-bg);
  --color-category-javascript-text: var(--category-javascript-text);
  --color-category-javascript-border: var(--category-javascript-border);
  --color-category-performance-bg: var(--category-performance-bg);
  --color-category-performance-text: var(--category-performance-text);
  --color-category-performance-border: var(--category-performance-border);
  --color-category-accessibility-bg: var(--category-accessibility-bg);
  --color-category-accessibility-text: var(--category-accessibility-text);
  --color-category-accessibility-border: var(--category-accessibility-border);
  --color-category-seo-bg: var(--category-seo-bg);
  --color-category-seo-text: var(--category-seo-text);
  --color-category-seo-border: var(--category-seo-border);
  --color-category-images-bg: var(--category-images-bg);
  --color-category-images-text: var(--category-images-text);
  --color-category-images-border: var(--category-images-border);
  --color-category-security-bg: var(--category-security-bg);
  --color-category-security-text: var(--category-security-text);
  --color-category-security-border: var(--category-security-border);
  --color-category-testing-bg: var(--category-testing-bg);
  --color-category-testing-text: var(--category-testing-text);
  --color-category-testing-border: var(--category-testing-border);

  /* Status */
  --color-success: var(--success);
  --color-success-foreground: var(--success-foreground);
  --color-warning: var(--warning);
  --color-warning-foreground: var(--warning-foreground);
  --color-error: var(--error);
  --color-error-foreground: var(--error-foreground);

  /* Chart */
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
}

/* =============================================================================
   Base Styles
   ============================================================================= */
@layer base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    border-color: var(--border);
  }

  body {
    background-color: var(--background);
    color: var(--foreground);
  }

  /* Monospace font for all code elements */
  code,
  kbd,
  samp,
  pre {
    font-family: var(--font-code);
  }

  html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
  }

  body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--text-base--line-height, 1.5);
    letter-spacing: -0.011em;
    color: var(--foreground);
    background-color: var(--background);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings:
      "kern" 1,
      "liga" 1,
      "calt" 1;
  }

  /* Typography scale - Linear inspired (headings use Sora; --font-sora is set on html by next/font) */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--font-sora), var(--font-sans);
  }

  h1 {
    font-size: var(--text-2xl);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: var(--text-2xl--line-height, 1.2);
  }

  h2 {
    font-size: var(--text-xl);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: var(--text-xl--line-height, 1.3);
  }

  h3 {
    font-size: var(--text-lg);
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: var(--text-lg--line-height, 1.4);
  }

  h4 {
    font-size: var(--text-base);
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: var(--text-base--line-height, 1.4);
  }

  p {
    font-size: var(--text-base);
    line-height: var(--text-base--line-height, 1.6);
  }

  small {
    font-size: var(--text-sm);
  }

  /* Links */
  a {
    color: inherit;
    text-decoration: none;
  }

  a:hover {
    text-decoration: none;
  }

  /* Focus styles - WCAG AAA compliant */
  *:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }

  /* Selection */
  ::selection {
    background-color: var(--accent-muted);
    color: var(--foreground);
  }
}

/* =============================================================================
   Utility Classes
   ============================================================================= */
@layer components {
  /* Container utilities - consistent widths across all pages */
  .container-prose {
    @apply w-full mx-auto px-4;
    max-width: var(--container-prose);
  }

  .container-content {
    @apply w-full mx-auto px-4;
    max-width: var(--container-content);
  }

  .container-wide {
    @apply w-full mx-auto px-4;
    max-width: var(--container-wide);
  }
}

/* =============================================================================
   Animation & Motion
   ============================================================================= */
@layer base {
  /* Accordion animations */
  @keyframes accordion-down {
    from {
      height: 0;
      opacity: 0;
    }
    to {
      height: var(--radix-accordion-content-height);
      opacity: 1;
    }
  }

  @keyframes accordion-up {
    from {
      height: var(--radix-accordion-content-height);
      opacity: 1;
    }
    to {
      height: 0;
      opacity: 0;
    }
  }

  .animate-accordion-down {
    animation: accordion-down 200ms ease-out;
  }

  .animate-accordion-up {
    animation: accordion-up 200ms ease-out;
  }

  /* Mentions section marquee (vertical scroll) */
  @keyframes mentions-marquee {
    from {
      transform: translateY(0);
    }
    to {
      transform: translateY(-50%);
    }
  }

  /* Respect reduced motion */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms;
      animation-iteration-count: 1;
      transition-duration: 0.01ms;
      scroll-behavior: auto;
    }
  }

  /* Smooth transitions for theme changes */
  html:not(.no-transition) {
    * {
      transition-property: background-color, border-color, color;
      transition-duration: var(--animate-duration-fast);
      transition-timing-function: ease;
    }
  }
}

/* =============================================================================
   High Contrast Mode Support
   ============================================================================= */
@media (prefers-contrast: high) {
  :root {
    --border: oklch(0.205 0 0);
    --border-subtle: oklch(0.556 0 0);
  }

  .dark {
    --border: oklch(0.985 0 0);
    --border-subtle: oklch(0.712 0.013 285.965);
  }
}

/* =============================================================================
   Print Styles
   ============================================================================= */
@media print {
  *,
  *::before,
  *::after {
    background: transparent;
    color: #000;
    box-shadow: none;
    text-shadow: none;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  .no-print {
    display: none;
  }
}

/* =============================================================================
   Scrollbar Styling (Optional, subtle)
   ============================================================================= */
@layer base {
  /* WebKit browsers */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: var(--radius-full);
  }

  ::-webkit-scrollbar-thumb:hover {
    background: var(--foreground-subtle);
  }

  /* Firefox */
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
  }
}

/* =============================================================================
   Code Blocks - Base Styling
   ============================================================================= */
@layer components {
  /* Monospace font stack */
  code,
  pre,
  kbd,
  samp {
    font-family: var(--font-code);
  }

  /* Ensure spans inside code also use monospace - (0,0,2) before (0,0,3) in selector list */
  code span,
  pre code span {
    font-family: inherit;
  }

  /* Code and inline code never show underline (e.g. URL displayed as code) */
  code,
  .code-inline {
    text-decoration: none;
  }

  /* Base pre/code styling for all code blocks */
  .prose pre,
  .code-block-wrapper pre,
  pre {
    margin: 1.5rem 0;
    padding: 1rem;
    overflow-x: hidden;
    font-family: var(--font-code);
    font-size: 0.875rem;
    line-height: 1.6;
    background-color: var(--code-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    color: var(--code-fg);
    white-space: pre-wrap;
    word-break: break-word;
  }

  .prose pre code,
  .code-block-wrapper pre code,
  pre code {
    display: block;
    padding: 0;
    font-family: var(--font-code);
    font-size: inherit;
    line-height: inherit;
    background: transparent;
    border: none;
    color: inherit;
  }

  /* Rehype Pretty Code specific styling - only for block code (figures with pre) */
  [data-rehype-pretty-code-figure]:has(pre) {
    position: relative;
    margin: 1.5rem 0;
  }

  /* Inline code figures should be inline, not block */
  [data-rehype-pretty-code-figure]:not(:has(pre)) {
    display: inline;
    margin: 0;
  }

  /* Title bar (filename) */
  [data-rehype-pretty-code-title] {
    display: flex;
    align-items: center;
    padding: 0.625rem 1rem;
    font-family: var(--font-code);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--foreground-muted);
    background-color: var(--background-muted);
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }

  [data-rehype-pretty-code-title] + pre {
    margin-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  /* Code element with grid display for line handling - only in pre (block code) */
  [data-rehype-pretty-code-figure] pre code {
    display: grid;
    counter-reset: line;
  }

  /* Line styling - only for block code */
  [data-rehype-pretty-code-figure] pre [data-line] {
    padding: 0 1rem;
    margin: 0 -1rem;
    border-left: 2px solid transparent;
  }

  /* Line numbers */
  [data-rehype-pretty-code-figure] code[data-line-numbers] > [data-line]::before {
    counter-increment: line;
    content: counter(line);
    display: inline-block;
    width: 1.5rem;
    margin-right: 1.5rem;
    text-align: right;
    color: var(--foreground-subtle);
    font-size: 0.75rem;
  }

  /* Highlighted line */
  .line--highlighted {
    background-color: color-mix(in oklch, var(--accent) 10%, transparent);
    border-left-color: var(--accent);
  }

  /* Highlighted word/chars */
  .word--highlighted {
    background-color: color-mix(in oklch, var(--accent) 20%, transparent);
    padding: 0.125rem 0.25rem;
    border-radius: var(--radius-sm);
  }

  /* Language badge - only for code blocks (pre elements), not inline code */
  [data-rehype-pretty-code-figure] pre [data-language]::before {
    content: attr(data-language);
    position: absolute;
    top: 0;
    right: 0;
    padding: 0.25rem 0.75rem;
    font-family: var(--font-code);
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--foreground-muted);
    background-color: color-mix(in oklch, var(--code-bg) 70%, var(--foreground-subtle));
    border-bottom-left-radius: var(--radius-md);
    border-top-right-radius: var(--radius-lg);
    transition: opacity var(--animate-duration-fast) ease;
  }

  /* Hide language badge when copy button becomes visible on hover */
  .code-block-wrapper:hover [data-language]::before,
  .code-block-wrapper:focus-within [data-language]::before {
    opacity: 0;
  }

  /* Inline code - ensure it stays inline and doesn't become a block */
  code[data-rehype-pretty-code-inline] {
    display: inline;
    padding: 0.125rem 0.375rem;
    font-family: var(--font-code);
    font-size: 0.875em;
    color: var(--accent);
    background-color: var(--accent-muted);
    border-radius: var(--radius-sm);
    white-space: nowrap;
  }

  /* Inline code wrapper span - must also be inline */
  code[data-rehype-pretty-code-inline] span {
    display: inline;
  }

  /* Hide language badge and any pseudo-elements for inline code */
  code[data-rehype-pretty-code-inline]::before,
  code[data-rehype-pretty-code-inline]::after {
    display: none;
    content: none;
  }

  /* Code block wrapper for copy button */
  .code-block-wrapper {
    position: relative;
    margin: 1.5rem 0;
  }

  .code-block-wrapper > pre {
    margin: 0;
    padding: 1rem 1.25rem;
    overflow-x: hidden;
    font-family: var(--font-code);
    font-size: 0.875rem;
    line-height: 1.6;
    background-color: var(--code-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    color: var(--code-fg);
    white-space: pre-wrap;
    word-break: break-word;
  }

  .code-block-wrapper--with-copy > pre {
    padding-right: 4.5rem;
  }

  .code-block-wrapper--compact > pre {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .code-block-wrapper--compact .copy-button {
    top: 0.375rem;
    right: 0.375rem;
  }

  .code-block-wrapper > pre code {
    font-family: var(--font-code);
  }

  .code-block-wrapper .copy-button {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 10;
    height: 2rem;
    width: 2rem;
    padding: 0;
    background-color: color-mix(in srgb, var(--background) 78%, transparent);
    border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
    border-radius: var(--radius-md);
    backdrop-filter: blur(8px);
    opacity: 0;
    transition:
      opacity var(--animate-duration-fast) ease,
      background-color var(--animate-duration-fast) ease,
      border-color var(--animate-duration-fast) ease;
  }

  .code-block-wrapper .copy-button:hover {
    background-color: color-mix(in srgb, var(--background) 90%, transparent);
    border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
  }

  .code-block-wrapper:hover .copy-button,
  .code-block-wrapper:focus-within .copy-button {
    opacity: 1;
  }

  /* Shiki token colors - ascending: (0,0,2) then (0,1,0) then (0,1,2) */
  code span {
    color: var(--shiki-light);
  }

  .code-surface-prompt {
    color: var(--foreground-subtle);
    user-select: none;
  }

  .dark code span {
    color: var(--shiki-dark);
  }

  /* Inline code styling */
  :not(pre) > code {
    padding: 0.125rem 0.375rem;
    font-family: var(--font-code);
    font-size: 0.875em;
    color: var(--accent);
    background-color: var(--accent-muted);
    border-radius: var(--radius-sm);
  }

  /* Shared code-block style (use on <pre> outside prose for consistent blocks) */
  pre.code-block {
    margin: 0;
    padding: 1rem 1.25rem;
    overflow-x: auto;
    font-family: var(--font-code);
    font-size: 0.875rem;
    line-height: 1.6;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    white-space: pre-wrap;
    word-break: break-word;
    background-color: var(--code-bg);
    color: var(--code-fg);
  }

  pre.code-block code {
    display: block;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    background: transparent;
    border: none;
    color: inherit;
  }

  /* Shared inline-code style (use on <code> outside prose for consistent tokens) */
  code.code-inline {
    display: inline;
    padding: 0.125rem 0.375rem;
    font-family: var(--font-code);
    font-size: 0.875em;
    color: var(--accent);
    background-color: var(--accent-muted);
    border-radius: var(--radius-sm);
    white-space: nowrap;
  }

  .dark code.code-inline {
    color: var(--accent);
    background-color: var(--accent-muted);
  }

  code.code-inline.break-all {
    white-space: normal;
    word-break: break-all;
  }

  /* HTML comment styling - pre .comment (0,1,1) before .prose pre .comment (0,2,1) */
  pre .comment,
  .prose pre .comment {
    color: #6a737d;
    font-style: italic;
  }
}

/* =============================================================================
   Callout Components
   ============================================================================= */
@layer components {
  .callout {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    margin: 0.75rem 0;
    border-radius: var(--radius-md);
    border: 1px solid;
  }

  .callout-icon {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    margin-top: 0.1rem;
  }

  .callout-content {
    flex: 1;
    min-width: 0;
  }

  .callout-title {
    font-weight: 600;
    font-size: var(--text-sm);
    line-height: 1.2;
  }

  .callout-description {
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--foreground-muted);
  }

  /* Remove paragraph margins inside callouts (ascending specificity: 0,1,1 then 0,2,1) */
  .callout-description p,
  .callout-description > p {
    margin: 0;
    padding: 0;
  }

  /* Second and later paragraphs: (0,1,2) before .prose variant (0,2,2) */
  .callout-description p + p {
    margin-top: 0.25rem;
  }

  .prose .callout-description p {
    margin: 0;
    padding: 0;
  }

  .prose .callout-description p + p {
    margin-top: 0.25rem;
  }

  /* List styling inside callouts */
  .callout-description ul,
  .callout-description ol {
    margin: 0.5rem 0 0 0;
    padding-left: 1.25rem;
    list-style-type: disc;
  }

  .callout-description ol {
    list-style-type: decimal;
  }

  .callout-description li {
    margin-bottom: 0.375rem;
    padding-left: 0.25rem;
  }

  .callout-description li:last-child {
    margin-bottom: 0;
  }

  .callout-description li strong {
    color: var(--foreground);
    font-weight: 600;
  }

  /* Fix inline code inside callouts - ascending specificity: (0,1,1) before (0,2,1) */
  .callout code {
    display: inline;
    padding: 0.125rem 0.375rem;
    font-family: var(--font-code);
    font-size: 0.875em;
    background-color: color-mix(in oklch, var(--foreground) 10%, transparent);
    border-radius: var(--radius-sm);
    color: inherit;
  }

  /* Hide code block artifacts (pre, figure) - (0,1,1) before .dark .callout code (0,2,1) */
  .callout pre,
  .callout [data-rehype-pretty-code-figure] {
    display: none;
  }

  .dark .callout code {
    background-color: color-mix(in oklch, var(--foreground) 10%, transparent);
  }

  /* Ensure callout description text wraps properly with inline code */
  .callout-description code {
    word-break: break-word;
  }

  /* Tip callout */
  .callout-tip {
    background-color: #f0f9ff;
    border-color: #bae6fd;
  }

  .callout-tip .callout-icon {
    color: #0284c7;
  }

  .callout-tip .callout-title {
    color: #0369a1;
  }

  .dark .callout-tip {
    background-color: #0c2d48;
    border-color: #0c4a6e;
  }

  .dark .callout-tip .callout-icon {
    color: #38bdf8;
  }

  .dark .callout-tip .callout-title {
    color: #7dd3fc;
  }

  /* Warning callout */
  .callout-warning {
    background-color: #fffbeb;
    border-color: #fde68a;
  }

  .callout-warning .callout-icon {
    color: #d97706;
  }

  .callout-warning .callout-title {
    color: #b45309;
  }

  .dark .callout-warning {
    background-color: #422006;
    border-color: #78350f;
  }

  .dark .callout-warning .callout-icon {
    color: #fbbf24;
  }

  .dark .callout-warning .callout-title {
    color: #fcd34d;
  }

  /* Error callout */
  .callout-error {
    background-color: #fef2f2;
    border-color: #fecaca;
  }

  .callout-error .callout-icon {
    color: #dc2626;
  }

  .callout-error .callout-title {
    color: #b91c1c;
  }

  .dark .callout-error {
    background-color: #450a0a;
    border-color: #7f1d1d;
  }

  .dark .callout-error .callout-icon {
    color: #f87171;
  }

  .dark .callout-error .callout-title {
    color: #fca5a5;
  }

  /* Success callout */
  .callout-success {
    background-color: #f0fdf4;
    border-color: #bbf7d0;
  }

  .callout-success .callout-icon {
    color: #16a34a;
  }

  .callout-success .callout-title {
    color: #15803d;
  }

  .dark .callout-success {
    background-color: #052e16;
    border-color: #166534;
  }

  .dark .callout-success .callout-icon {
    color: #4ade80;
  }

  .dark .callout-success .callout-title {
    color: #86efac;
  }

  /* Exceptions callout - for "When to Break This Rule" */
  .callout-exceptions {
    background-color: #faf5ff;
    border-color: #e9d5ff;
  }

  .callout-exceptions .callout-icon {
    color: #9333ea;
  }

  .callout-exceptions .callout-title {
    color: #7e22ce;
  }

  .dark .callout-exceptions {
    background-color: #2e1065;
    border-color: #581c87;
  }

  .dark .callout-exceptions .callout-icon {
    color: #c084fc;
  }

  .dark .callout-exceptions .callout-title {
    color: #d8b4fe;
  }
}

/* =============================================================================
   Code Tabs Component
   ============================================================================= */
@layer components {
  .code-tabs {
    margin: 1.5rem 0;
  }

  .code-tabs-list {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .code-tabs-list::-webkit-scrollbar {
    display: none;
  }

  .code-tabs-trigger {
    position: relative;
    padding: 0.625rem 1rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--foreground-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s ease;
  }

  .code-tabs-trigger:hover {
    color: var(--foreground);
  }

  .code-tabs-trigger[data-state="active"] {
    color: var(--accent);
  }

  .code-tabs-trigger[data-state="active"]::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--accent);
    border-radius: 1px 1px 0 0;
  }

  .code-tabs-trigger:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    border-radius: var(--radius-sm);
  }

  .code-tabs-content {
    margin-top: 0;
  }

  .code-tabs-content[data-state="inactive"] {
    display: none;
  }

  /* Code block inside tabs should have no top margin */
  .code-tabs-content > .code-block-wrapper,
  .code-tabs-content > pre,
  .code-tabs-content > [data-rehype-pretty-code-figure] {
    margin-top: 0;
  }

  /* Code block should connect to tab bar */
  .code-tabs-content > .code-block-wrapper > pre,
  .code-tabs-content > pre {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: none;
  }

  /* Mobile responsive - slightly smaller padding */
  @media (max-width: 640px) {
    .code-tabs-trigger {
      padding: 0.5rem 0.75rem;
      font-size: 0.75rem;
    }
  }
}

/* =============================================================================
   Prose Enhancements for MDX Content
   ============================================================================= */
@layer components {
  .prose {
    font-size: var(--text-base);
    line-height: 1.7;
    color: var(--foreground);
  }

  /* (0,1,0) before (0,1,1) and (0,2,1) for ascending specificity */
  .dark :where(.prose) {
    color: var(--foreground);
  }

  /* TLDR (0,1,0) and (0,1,1) before .prose (0,1,1) - interleaved for ascending specificity */
  .tldr-summary {
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
    background-color: var(--accent-muted);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius-lg);
  }

  .tldr-summary-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--accent);
  }

  .tldr-summary-list {
    margin: 0;
    padding-left: 1.25rem;
    list-style-type: disc;
  }

  .tldr-why {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--foreground-muted);
  }

  .tldr-why svg {
    flex-shrink: 0;
    margin-top: 0.125rem;
    color: var(--warning);
  }

  .prose .tldr-why strong {
    color: var(--foreground);
  }

  .prose h2 {
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    font-size: var(--text-2xl);
    font-weight: 600;
    border-bottom: 1px solid var(--border);
  }

  .prose h3 {
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    font-size: var(--text-xl);
    font-weight: 600;
  }

  .prose h4 {
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    font-size: var(--text-lg);
    font-weight: 600;
  }

  .prose p {
    margin-bottom: 1rem;
  }

  .prose ul {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
    list-style-type: disc;
  }

  .prose ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
    list-style-type: decimal;
  }

  .prose li {
    margin-bottom: 0.5rem;
  }

  .prose li > ul {
    list-style-type: circle;
    margin-top: 0.25rem;
  }

  .prose li > ol {
    list-style-type: lower-alpha;
    margin-top: 0.25rem;
  }

  .prose ul.contains-task-list {
    padding-left: 0;
    list-style: none;
  }

  .prose ul.contains-task-list > li {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .prose ul.contains-task-list > li::marker {
    content: "";
  }

  .prose ul.contains-task-list > li > input[type="checkbox"] {
    position: absolute;
    width: 0;
    height: 0;
    margin: 0;
    opacity: 0;
    pointer-events: none;
  }

  .prose ul.contains-task-list > li::before {
    content: "";
    margin-top: 0.18rem;
    height: 1rem;
    width: 1rem;
    flex-shrink: 0;
    border: 1px solid var(--border-hover);
    border-radius: 2px;
    background: var(--background-subtle);
  }

  .prose ul.contains-task-list > li:has(> input[type="checkbox"]:checked)::before {
    border-color: var(--accent);
    background: var(--accent);
  }

  .prose ul.contains-task-list > li:has(> input[type="checkbox"]:checked)::after {
    content: "";
    position: absolute;
    top: 0.4rem;
    left: 0.36rem;
    height: 0.55rem;
    width: 0.28rem;
    border: solid var(--accent-foreground);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }

  .prose a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .prose a:hover {
    color: var(--accent-hover);
  }

  .prose blockquote {
    margin: 1.5rem 0;
    padding: 0.75rem 1rem;
    border-left: 4px solid var(--accent);
    background-color: var(--background-subtle);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-style: italic;
    color: var(--foreground-muted);
  }

  .prose table {
    width: 100%;
    margin: 1.5rem 0;
    border-collapse: collapse;
    font-size: var(--text-sm);
  }

  .prose th,
  .prose td {
    padding: 0.75rem;
    text-align: left;
    border: 1px solid var(--border);
  }

  .prose th {
    font-weight: 600;
    background-color: var(--background-subtle);
  }

  .prose hr {
    margin: 2rem 0;
    border: none;
    border-top: 1px solid var(--border);
  }

  /* Code blocks in prose - (0,1,1) before (0,2,1) for ascending specificity */
  .prose pre {
    margin: 1.5rem 0;
  }

  .prose code {
    font-family: var(--font-code);
  }

  .tldr-summary-list li {
    margin-bottom: 0.375rem;
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--foreground);
  }

  .tldr-summary-list li:last-child {
    margin-bottom: 0;
  }

  /* Ensure inline code in prose is styled differently from code blocks */
  .prose :not(pre) > code {
    padding: 0.125rem 0.375rem;
    font-size: 0.875em;
    color: var(--accent);
    background-color: var(--accent-muted);
    border-radius: var(--radius-sm);
  }
}