/*
 * F-003 Design Tokens — authoritative source of --tk-* custom properties.
 *
 * This file is the single source of truth for the `--tk-*` namespace.
 * Do not redefine `--ark-*` here. Those flow from the Arkhe customizer via
 * `wp_options.arkhe_settings`, which `inc/design-tokens.php` writes once on
 * theme activation.
 *
 * Scope: colors, typography, spacing, radii, shadows, breakpoints (doc only),
 * container widths, z-index, and transition timing.
 *
 * All foreground/background pairs in this file satisfy WCAG 2.2 AA (>= 4.5:1
 * for normal body text). See contrast_report.json for the computed ratios.
 */

:root {
    /* ===== Color ===== */
    --tk-color-primary:       #0B5FAE;
    --tk-color-primary-hover: #0A4F92;
    --tk-color-accent:        #06C755;
    --tk-color-accent-hover:  #05B24C;
    --tk-color-ink:           #1F2933;
    --tk-color-ink-muted:     #52606D;
    --tk-color-bg:            #FFFFFF;
    --tk-color-bg-subtle:     #F5F7FA;
    --tk-color-border:        #D8DEE6;
    --tk-color-link:          #0B63B5;
    --tk-color-success:       #047857;
    --tk-color-warn:          #B45309;
    --tk-color-danger:        #C81E1E;

    /* ===== Typography: family ===== */
    --tk-font-sans:    "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --tk-font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", "Courier New", monospace;
    --tk-font-heading: var(--tk-font-sans);

    /* ===== Typography: size (mobile-first clamp) ===== */
    --tk-fs-xs:   0.75rem;
    --tk-fs-sm:   0.875rem;
    --tk-fs-base: 1rem;
    --tk-fs-md:   clamp(1.0625rem, 0.85rem + 0.5vw, 1.125rem);
    --tk-fs-lg:   clamp(1.125rem, 0.95rem + 0.6vw, 1.25rem);
    --tk-fs-xl:   clamp(1.25rem, 1rem + 1vw, 1.5rem);
    --tk-fs-2xl:  clamp(1.5rem, 1.1rem + 1.6vw, 2rem);
    --tk-fs-3xl:  clamp(1.75rem, 1.2rem + 2.4vw, 2.5rem);

    /* ===== Typography: line-height ===== */
    --tk-lh-tight:   1.25;
    --tk-lh-snug:    1.4;
    --tk-lh-normal:  1.6;
    --tk-lh-relaxed: 1.75;
    --tk-lh-loose:   2.0;

    /* ===== Typography: letter-spacing ===== */
    --tk-ls-tight:  -0.01em;
    --tk-ls-normal: 0.02em;
    --tk-ls-wide:   0.05em;

    /* ===== Typography: weight ===== */
    --tk-fw-normal: 400;
    --tk-fw-medium: 500;
    --tk-fw-bold:   700;

    /* ===== Spacing (4px grid) ===== */
    --tk-space-0:  0;
    --tk-space-1:  4px;
    --tk-space-2:  8px;
    --tk-space-3:  12px;
    --tk-space-4:  16px;
    --tk-space-5:  20px;
    --tk-space-6:  24px;
    --tk-space-8:  32px;
    --tk-space-10: 40px;
    --tk-space-12: 48px;
    --tk-space-16: 64px;
    --tk-space-20: 80px;
    --tk-space-24: 96px;
    --tk-space-32: 128px;

    /* ===== Radius ===== */
    --tk-radius-none: 0;
    --tk-radius-sm:   4px;
    --tk-radius-md:   8px;
    --tk-radius-lg:   12px;
    --tk-radius-xl:   16px;
    --tk-radius-pill: 9999px;

    /* ===== Shadow ===== */
    --tk-shadow-none: none;
    --tk-shadow-xs:   0 1px 2px rgba(15, 23, 42, 0.06);
    --tk-shadow-sm:   0 2px 4px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
    --tk-shadow-md:   0 6px 12px rgba(15, 23, 42, 0.10), 0 2px 4px rgba(15, 23, 42, 0.06);
    --tk-shadow-lg:   0 12px 24px rgba(15, 23, 42, 0.12), 0 4px 8px rgba(15, 23, 42, 0.06);

    /* ===== Breakpoint (documentation only; CSS custom properties cannot be used in @media) ===== */
    --tk-bp-sm:  480px;
    --tk-bp-md:  768px;
    --tk-bp-lg:  1024px;
    --tk-bp-xl:  1280px;
    --tk-bp-2xl: 1440px;

    /* ===== Container / Layout ===== */
    --tk-container-max:  1200px;
    --tk-container-slim: 960px;
    --tk-gutter-inline:  clamp(16px, 4vw, 32px);

    /* ===== Z-index ===== */
    --tk-z-base:     0;
    --tk-z-dropdown: 100;
    --tk-z-sticky:   200;
    --tk-z-header:   500;
    --tk-z-drawer:   800;
    --tk-z-modal:    1000;
    --tk-z-toast:    1200;

    /* ===== Transition ===== */
    --tk-ease:       cubic-bezier(0.4, 0, 0.2, 1);
    --tk-dur-fast:   120ms;
    --tk-dur-normal: 200ms;
    --tk-dur-slow:   320ms;
}

/*
 * Dark-mode placeholder — Phase 1 ships light-mode only (AC-15).
 * Do NOT populate values here yet. Design Evaluator will revise this block
 * when Phase 2 dark-mode work is scheduled.
 */
@media (prefers-color-scheme: dark) {
    :root {
        /* TODO(phase2): populate dark-mode token overrides here. */
    }
}