/*
 * tailwind-utils.css — Clova Co Design System
 * A hand-crafted subset of Tailwind v4 utilities, bound to tokens.css CSS variables.
 * Naming matches Tailwind exactly so class names copy directly into production code.
 * Load AFTER tokens.css. No CDN or build step required.
 *
 * Production: use @tailwindcss/vite (or PostCSS) with the @theme inline bridge from
 * globals.css — these names resolve identically.
 */

/* =========================================================================
   RESET / BASE
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }

/* =========================================================================
   LAYOUT
   ========================================================================= */
.block         { display: block; }
.inline-block  { display: inline-block; }
.inline        { display: inline; }
.inline-flex   { display: inline-flex; }
.flex          { display: flex; }
.grid          { display: grid; }
.hidden        { display: none; }

.flex-col      { flex-direction: column; }
.flex-row      { flex-direction: row; }
.flex-wrap     { flex-wrap: wrap; }
.flex-nowrap   { flex-wrap: nowrap; }
.flex-1        { flex: 1 1 0%; }
.flex-shrink-0 { flex-shrink: 0; }

.items-start   { align-items: flex-start; }
.items-center  { align-items: center; }
.items-end     { align-items: flex-end; }
.items-baseline{ align-items: baseline; }

.justify-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.justify-between { justify-content: space-between; }

.gap-1   { gap: 4px; }
.gap-1\.5{ gap: 6px; }
.gap-2   { gap: 8px; }
.gap-2\.5{ gap: 10px; }
.gap-3   { gap: 12px; }
.gap-4   { gap: 16px; }
.gap-5   { gap: 20px; }
.gap-6   { gap: 24px; }

.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.col-span-2 { grid-column: span 2 / span 2; }

/* Position */
.relative { position: relative; }
.absolute { position: absolute; }
.inset-0  { inset: 0; }

/* =========================================================================
   SIZING
   ========================================================================= */
.w-full    { width: 100%; }
.w-9       { width: 36px; }
.w-10      { width: 40px; }
.w-1\.5    { width: 6px; }
.w-px      { width: 1px; }
.max-w-xs  { max-width: 320px; }
.max-w-sm  { max-width: 384px; }
.max-w-md  { max-width: 448px; }
.max-w-xl  { max-width: 576px; }
.max-w-2xl { max-width: 672px; }
.min-w-0   { min-width: 0; }

.h-7   { height: 28px; }
.h-9   { height: 36px; }
.h-10  { height: 40px; }
.h-11  { height: 44px; }
.h-px  { height: 1px; }
.h-1\.5{ height: 6px; }
.min-h-16 { min-height: 64px; }

/* =========================================================================
   SPACING — margin
   ========================================================================= */
.m-0    { margin: 0; }
.mx-auto{ margin-inline: auto; }
.mt-0   { margin-top: 0; }
.mt-0\.5{ margin-top: 2px; }
.mt-1   { margin-top: 4px; }
.mt-1\.5{ margin-top: 6px; }
.mt-2   { margin-top: 8px; }
.mb-1   { margin-bottom: 4px; }
.mb-2   { margin-bottom: 8px; }
.mb-3   { margin-bottom: 12px; }
.mb-4   { margin-bottom: 16px; }
.mb-5   { margin-bottom: 20px; }
.mb-6   { margin-bottom: 24px; }
.my-5   { margin-block: 20px; }
.my-6   { margin-block: 24px; }

/* =========================================================================
   SPACING — padding
   ========================================================================= */
.p-4   { padding: 16px; }
.p-5   { padding: 20px; }
.px-0  { padding-inline: 0; }
.px-1  { padding-inline: 4px; }
.px-1\.5 { padding-inline: 6px; }
.px-2  { padding-inline: 8px; }
.px-2\.5 { padding-inline: 10px; }
.px-3  { padding-inline: 12px; }
.px-4  { padding-inline: 16px; }
.px-5  { padding-inline: 20px; }
.py-0  { padding-block: 0; }
.py-0\.5 { padding-block: 2px; }
.py-1  { padding-block: 4px; }
.py-2  { padding-block: 8px; }
.pt-0  { padding-top: 0; }
.pt-1  { padding-top: 4px; }

/* =========================================================================
   TYPOGRAPHY
   ========================================================================= */
.font-sans  { font-family: var(--font-sans); }
.font-mono  { font-family: var(--font-mono); }

.text-xs   { font-size: 12px; line-height: 16px; }
.text-sm   { font-size: 14px; line-height: 20px; }
.text-base { font-size: 16px; line-height: 24px; }
.text-lg   { font-size: 18px; line-height: 28px; }
.text-xl   { font-size: 20px; line-height: 28px; }
.text-2xl  { font-size: 24px; line-height: 32px; }

/* Arbitrary sizes */
.text-\[10px\]  { font-size: 10px; line-height: 14px; }
.text-\[11px\]  { font-size: 11px; line-height: 16px; }
.text-\[12px\]  { font-size: 12px; line-height: 16px; }
.text-\[13px\]  { font-size: 13px; line-height: 20px; }
.text-\[14px\]  { font-size: 14px; line-height: 20px; }

.font-normal   { font-weight: 400; }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }

.tracking-tight   { letter-spacing: -0.025em; }
.tracking-wide    { letter-spacing: 0.025em; }
.tracking-widest  { letter-spacing: 0.1em; }

.leading-none    { line-height: 1; }
.leading-tight   { line-height: 1.25; }
.leading-snug    { line-height: 1.375; }
.leading-normal  { line-height: 1.5; }
.leading-6       { line-height: 24px; }

.uppercase { text-transform: uppercase; }
.truncate  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.whitespace-nowrap { white-space: nowrap; }
.overflow-x-auto   { overflow-x: auto; }
.resize-y  { resize: vertical; }

/* =========================================================================
   COLORS — text
   ========================================================================= */
.text-foreground       { color: var(--foreground); }
.text-primary          { color: var(--primary); }
.text-primary-foreground { color: var(--primary-foreground); }
.text-secondary-foreground { color: var(--secondary-foreground); }
.text-muted-foreground { color: var(--muted-foreground); }
.text-accent-foreground{ color: var(--accent-foreground); }
.text-destructive      { color: var(--destructive); }
.text-destructive-foreground { color: var(--destructive-foreground); }
.text-card-foreground  { color: var(--card-foreground); }
.text-success          { color: var(--success); }
.text-warning          { color: var(--warning); }
.text-danger           { color: var(--danger); }
.text-com-shade-30     { color: var(--com-shade-30); }
.text-n-600            { color: var(--n-600); }
.text-n-800            { color: var(--n-800); }

/* =========================================================================
   COLORS — background
   ========================================================================= */
.bg-background      { background-color: var(--background); }
.bg-foreground      { background-color: var(--foreground); }
.bg-primary         { background-color: var(--primary); }
.bg-secondary       { background-color: var(--secondary); }
.bg-muted           { background-color: var(--muted); }
.bg-accent          { background-color: var(--accent); }
.bg-destructive     { background-color: var(--destructive); }
.bg-card            { background-color: var(--card); }
.bg-success-tint    { background-color: var(--success-tint); }
.bg-warning-tint    { background-color: var(--warning-tint-40); }
.bg-danger-tint     { background-color: var(--danger-tint-40); }
.bg-com-tint-30     { background-color: var(--com-tint-30); }
.bg-transparent     { background-color: transparent; }
.bg-n-150           { background-color: var(--n-150); }

/* =========================================================================
   COLORS — border
   ========================================================================= */
.border-border      { border-color: var(--border); }
.border-input       { border-color: var(--input); }
.border-destructive { border-color: var(--destructive); }
.border-transparent { border-color: transparent; }

/* =========================================================================
   BORDERS
   ========================================================================= */
.border   { border-width: 1px; border-style: solid; }
.border-0 { border-width: 0; }

.rounded-sm   { border-radius: calc(var(--radius) * 0.6); }   /* ~6px */
.rounded-md   { border-radius: calc(var(--radius) * 0.8); }   /* ~8px */
.rounded-lg   { border-radius: var(--radius); }                /* ~10px */
.rounded-xl   { border-radius: calc(var(--radius) * 1.4); }   /* ~14px */
.rounded-full { border-radius: 9999px; }

/* =========================================================================
   EFFECTS
   ========================================================================= */
.opacity-50 { opacity: 0.5; }
.opacity-70 { opacity: 0.7; }
.opacity-90 { opacity: 0.9; }

/* =========================================================================
   INTERACTIVITY
   ========================================================================= */
.cursor-pointer       { cursor: pointer; }
.cursor-not-allowed   { cursor: not-allowed; }
.pointer-events-none  { pointer-events: none; }
.select-none          { user-select: none; }
.outline-none         { outline: none; }

/* =========================================================================
   TRANSITIONS
   ========================================================================= */
.transition-all      { transition-property: all; transition-timing-function: var(--ease-standard); }
.transition-colors   { transition-property: color, background-color, border-color; transition-timing-function: var(--ease-standard); }
.duration-150        { transition-duration: 150ms; }
.duration-200        { transition-duration: 200ms; }

/* =========================================================================
   FOCUS VISIBLE — ring
   ========================================================================= */
.focus-visible\:outline-none:focus-visible { outline: none; }
.focus-visible\:ring-2:focus-visible {
  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
}
.focus-visible\:border-ring:focus-visible { border-color: var(--ring); }
.focus-visible\:ring-offset-1:focus-visible { /* handled above */ }

/* Input focus ring (softer, brand-matched) */
.focus-ring:focus-visible {
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 40%, transparent);
}

/* =========================================================================
   DISABLED
   ========================================================================= */
.disabled\:pointer-events-none:disabled { pointer-events: none; }
.disabled\:opacity-50:disabled          { opacity: 0.5; }

/* =========================================================================
   HOVER
   ========================================================================= */
.hover\:bg-secondary:hover        { background-color: var(--secondary); }
.hover\:bg-muted:hover            { background-color: var(--muted); }
.hover\:bg-accent:hover           { background-color: var(--accent); }
.hover\:bg-n-150:hover            { background-color: var(--n-150); }
.hover\:bg-n-200:hover            { background-color: var(--n-200); }
.hover\:bg-com-shade-10:hover     { background-color: var(--com-shade-10); }
.hover\:text-accent-foreground:hover { color: var(--accent-foreground); }
.hover\:opacity-90:hover          { opacity: 0.9; }

/* =========================================================================
   ACTIVE
   ========================================================================= */
.active\:bg-com-shade-20:active   { background-color: var(--com-shade-20); }
.active\:bg-muted:active          { background-color: var(--muted); }

/* =========================================================================
   PLACEHOLDER
   ========================================================================= */
.placeholder\:text-muted-foreground::placeholder { color: var(--muted-foreground); }