tailwind.css

/**
 * ============================================================
 * TAILWIND CSS v4 配置入口
 * travellerse.dev - IKB Art Edition
 * ============================================================
 */

@import "tailwindcss";

/* 先导入设计令牌,使其可在 @theme 中引用 */
@import "./assets/styling/tokens.css";

/* ========================================
 * 🎨 主题扩展 (Theme Extension)
 * ======================================== */
@theme {
    /* 色彩映射 */
    --color-ikb: var(--ikb-blue);
    --color-canvas: var(--bg-canvas);
    --color-canvas-alt: var(--bg-canvas-alt);
    --color-ink: var(--text-ink);
    --color-muted: var(--text-muted);
    --color-border: var(--border-light);
    --color-border-bold: var(--border-bold);
    --color-border-light: var(--border-light);

    /* 字体映射 */
    --font-family-sans: var(--font-sans);
    --font-family-mono: var(--font-mono);

    /* ⚠️ 强制零圆角 - 覆盖所有默认圆角值 */
    --radius-xs: 0;
    --radius-sm: 0;
    --radius-DEFAULT: 0;
    --radius-md: 0;
    --radius-lg: 0;
    --radius-xl: 0;
    --radius-2xl: 0;
    --radius-3xl: 0;
    --radius-full: 0;

    /* 间距映射(使用tokens中定义的值) */
    --spacing-1: var(--space-1);
    --spacing-2: var(--space-2);
    --spacing-3: var(--space-3);
    --spacing-4: var(--space-4);
    --spacing-6: var(--space-6);
    --spacing-8: var(--space-8);
    --spacing-12: var(--space-12);
    --spacing-16: var(--space-16);
    --spacing-24: var(--space-24);
    --spacing-32: var(--space-32);

    /* 过渡时长 */
    --duration-fast: var(--duration-fast);
    --duration-normal: var(--duration-normal);
    --duration-slow: var(--duration-slow);

    /* 最大宽度 */
    --max-width-prose: var(--max-width-prose);
    --max-width-content: var(--max-width-content);
    --max-width-wide: var(--max-width-wide);
}

/* ========================================
 * 🔧 自定义工具类 (Custom Utilities)
 * ======================================== */
@utility ikb-hover {
    transition-property: color, background-color;
    transition-duration: var(--duration-fast);
    transition-timing-function: var(--easing-default);

    &:hover {
        background-color: var(--ikb-blue);
        color: var(--text-on-ikb);
    }
}

@utility border-structural {
    border: var(--border-width-thin) solid var(--border-bold);
}

@utility border-subtle {
    border: var(--border-width-thin) solid var(--border-light);
}

@utility text-display {
    font-size: var(--text-6xl);
    font-weight: var(--font-weight-black);
    letter-spacing: var(--tracking-tighter);
    line-height: var(--leading-none);
}

@utility text-headline {
    font-size: var(--text-4xl);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
}

@utility text-title {
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--leading-snug);
}

@utility text-body {
    font-size: var(--text-lg);
    font-weight: var(--font-weight-normal);
    line-height: var(--leading-relaxed);
    color: var(--text-ink);
}

@utility text-meta {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    color: var(--text-muted);
}

@utility focus-ring {
    &:focus-visible {
        outline: 2px solid var(--ikb-blue);
        outline-offset: 2px;
    }
}