Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

/* ── src/styles/globals.css ───────────────────────── */

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

/* Custom base layer: design token variables + element defaults */
@layer base {
  :root {
    --color-primary:     #4f6ef7;
    --color-primary-hover: #3a52e8;
    --color-surface:     #ffffff;
    --color-text:        #111827;
  }

.dark {
    --color-primary:     #6d8dfc;
    --color-primary-hover: #93adfd;
    --color-surface:     #1f2937;
    --color-text:        #f9fafb;
  }

body {
    @apply text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-950;
    font-feature-settings: 'rlig' 1, 'calt' 1;
  }

h1, h2, h3, h4 {
    @apply font-bold tracking-tight;
  }

a:focus-visible {
    @apply outline-none ring-2 ring-blue-500 ring-offset-2;
  }
}

/* Custom component layer */
@layer components {
  .page-container {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }

.section-heading {
    @apply text-3xl font-extrabold tracking-tight text-gray-900 dark:text-white;
  }
}

/* Custom utility layer */
@layer utilities {
  .text-balance {
    text-wrap: balance;
  }

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }

.gradient-mask-b {
    -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
  }
}