/* Design Tokens */
@layer tokens, base, components, utilities;

/* Note: Font should be loaded in HTML <head> for better performance:
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;700;900&display=swap" rel="stylesheet">
*/

/*
  配色トークンの規約
  - 意味を持つ配色トークン（--wf-color-* / --wf-surface-* / --wf-primary-* / 状態色）は
    light-dark(ライト, ダーク) で定義する。モードの切り替えは color-scheme だけで行う。
  - 文字に使う色は、その色が置かれうる背景すべてに対して 4.5:1 以上、
    枠線・フォーカスリングなどの UI 部品は 3:1 以上を満たす（npm run check:contrast で検証）。
  - 背景色には対になる前景色を用意する（--wf-primary-bg / --wf-primary-fg、--wf-success / --wf-success-fg など）。
    背景用のトークン（--wf-surface-base など）を文字色として流用しない。
  - コンポーネントは階調トークン（--wf-ink-* / --wf-accent-* など）を直接参照しない。
    階調はモードによって変化しないため、ダークモードで破綻する。
*/

@layer tokens {
  :root {
    color-scheme: light dark;

    /* Typography - Japanese serif for wa-fu aesthetics */
    --wf-font-family: "Noto Serif JP", serif;
    --wf-font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* Traditional colors (十二単の伝統色) */
    --wf-koubai: #f4a7b9; /* 紅梅 - red plum */
    --wf-fuji: #b28fce; /* 藤 - wisteria */
    --wf-sakura: #fddede; /* 桜 - cherry blossom */
    --wf-shirayuri: #f8f4e6; /* 白百合 - white lily */
    --wf-sumi: #2c2c2c; /* 墨 - ink */
    --wf-hai: #828282; /* 灰 - ash */
    --wf-ai: #165e83; /* 藍 - indigo */
    --wf-yamabuki: #f8b500; /* 山吹 - bright yellow */
    --wf-tsuyukusa: #38a1db; /* 露草 - dayflower blue */
    --wf-tokiwa: #007b43; /* 常盤 - evergreen */
    --wf-anzu: #f7b977; /* 杏 - apricot */
    --wf-akane: #b7282e; /* 茜 - madder red */

    /* RGB values for gradients */
    --wf-koubai-rgb: 244, 167, 185;
    --wf-fuji-rgb: 178, 143, 206;
    --wf-sakura-rgb: 253, 222, 222;

    /* Fujimurasaki (accent) scale */
    --wf-accent-50: #f0ecf3;
    --wf-accent-100: #e2dcef;
    --wf-accent-200: #cfc7e3;
    --wf-accent-300: #b9afd2;
    --wf-accent-400: #8f82a8;
    --wf-accent-500: #6a5c7c; /* base */
    --wf-accent-600: #5e516f;
    --wf-accent-700: #4f4560;
    --wf-accent-800: #413a50;
    --wf-accent-900: #332f41;

    /* Status color scales - 500 is the named traditional color */
    /* Success (常盤 tokiwa #007b43) */
    --wf-success-50: #e6f4ec;
    --wf-success-100: #c2e4d0;
    --wf-success-200: #8fcdaa;
    --wf-success-300: #5bb585;
    --wf-success-400: #2a9a62;
    --wf-success-500: #007b43;
    --wf-success-600: #006b3a;
    --wf-success-700: #005a31;
    --wf-success-800: #004a28;
    --wf-success-900: #00391f;

    /* Warning (杏 anzu #f7b977) */
    --wf-warning-50: #fef7ef;
    --wf-warning-100: #fdead6;
    --wf-warning-200: #fbdcbc;
    --wf-warning-300: #f9cda1;
    --wf-warning-400: #f8c38c;
    --wf-warning-500: #f7b977;
    --wf-warning-600: #d98f3f;
    --wf-warning-700: #b06a1f;
    --wf-warning-800: #8a5012;
    --wf-warning-900: #5f370b;

    /* Danger (茜 akane #b7282e) */
    --wf-danger-50: #f8e6e7;
    --wf-danger-100: #f0c4c6;
    --wf-danger-200: #e39599;
    --wf-danger-300: #d6666b;
    --wf-danger-400: #c84047;
    --wf-danger-500: #b7282e;
    --wf-danger-600: #9e2227;
    --wf-danger-700: #851c21;
    --wf-danger-800: #6c171a;
    --wf-danger-900: #521114;

    /* Ink (neutral) scale */
    --wf-ink-50: #fafafa;
    --wf-ink-100: #e5e5e5;
    --wf-ink-200: #cccccc;
    --wf-ink-300: #999999;
    --wf-ink-400: #808080;
    --wf-ink-500: #666666;
    --wf-ink-600: #555555;
    --wf-ink-700: #444444;
    --wf-ink-800: #333333;
    --wf-ink-900: #1f1f1f;

    /* RGB values for status colors (for opacity/gradients) */
    --wf-success-500-rgb: 0, 123, 67;
    --wf-warning-500-rgb: 247, 185, 119;
    --wf-danger-500-rgb: 183, 40, 46;

    /* RGB values for ink scales */
    --wf-ink-50-rgb: 250, 250, 250;
    --wf-ink-100-rgb: 229, 229, 229;
    --wf-ink-200-rgb: 204, 204, 204;
    --wf-ink-300-rgb: 153, 153, 153;
    --wf-ink-400-rgb: 128, 128, 128;
    --wf-ink-500-rgb: 102, 102, 102;
    --wf-ink-600-rgb: 85, 85, 85;
    --wf-ink-700-rgb: 68, 68, 68;
    --wf-ink-800-rgb: 51, 51, 51;
    --wf-ink-900-rgb: 31, 31, 31;

    /* RGB values for accent scales */
    --wf-accent-50-rgb: 240, 236, 243;
    --wf-accent-100-rgb: 226, 220, 239;
    --wf-accent-200-rgb: 207, 199, 227;
    --wf-accent-300-rgb: 185, 175, 210;
    --wf-accent-400-rgb: 143, 130, 168;
    --wf-accent-500-rgb: 106, 92, 124;
    --wf-accent-600-rgb: 94, 81, 111;
    --wf-accent-700-rgb: 79, 69, 96;
    --wf-accent-800-rgb: 65, 58, 80;
    --wf-accent-900-rgb: 51, 47, 65;

    /* ===== Semantic colors (light-dark) ===== */

    /* Page & surfaces */
    --wf-color-bg: light-dark(#e7ddd4, #121212); /* haizakura */
    --wf-surface-base: light-dark(#ffffff, #1f1f1f);
    --wf-surface-subtle: light-dark(#faf7f5, #2a2a2a);
    --wf-surface-muted: light-dark(#f5f2ef, #333333);

    /* Text */
    --wf-color-text: light-dark(var(--wf-ink-900), #e5e5e5);
    --wf-color-muted: light-dark(var(--wf-ink-700), #b8b8b8);

    /* Borders (subtle/default are decorative; strong is for form controls: >=3:1) */
    --wf-color-border-subtle: light-dark(#ddd5cd, #333333);
    --wf-color-border-strong: light-dark(#767676, #929292);

    /* Accent: text-safe on every page surface and accent tint */
    --wf-color-accent: light-dark(var(--wf-accent-500), var(--wf-accent-300));
    --wf-color-accent-subtle: light-dark(var(--wf-accent-50), #29252f);
    --wf-color-accent-muted: light-dark(var(--wf-accent-100), #373043);
    /* Foreground on an accent fill (checkbox mark, switch thumb, range thumb border) */
    --wf-color-accent-fg: light-dark(#ffffff, #1f1f1f);

    /* Links */
    --wf-link-color: light-dark(var(--wf-accent-600), var(--wf-accent-300));
    --wf-link-color-hover: light-dark(var(--wf-accent-700), var(--wf-accent-200));

    /* Primary fill (buttons, selected states) */
    --wf-primary-bg: light-dark(var(--wf-accent-700), var(--wf-accent-300));
    --wf-primary-bg-hover: light-dark(var(--wf-accent-800), var(--wf-accent-200));
    --wf-primary-bg-active: light-dark(var(--wf-accent-900), var(--wf-accent-100));
    --wf-primary-fg: light-dark(#ffffff, #1f1f1f);

    /* Focus ring (>=3:1 against page and surfaces) */
    --wf-focus: light-dark(var(--wf-accent-700), var(--wf-accent-300));

    /* Gradient button */
    --wf-gradient-end: light-dark(var(--wf-accent-500), var(--wf-accent-200));

    /* Status: fill / fg on fill / text on page / translucent background */
    --wf-success: var(--wf-tokiwa);
    --wf-success-fg: #ffffff;
    --wf-success-text: light-dark(#006436, #3fcf8e);
    --wf-success-veil: light-dark(rgba(0, 123, 67, 0.1), rgba(0, 123, 67, 0.2));

    --wf-warning: var(--wf-anzu);
    --wf-warning-fg: #1f1f1f;
    --wf-warning-text: light-dark(#8f4e08, #f8bf83);
    --wf-warning-veil: light-dark(rgba(247, 185, 119, 0.25), rgba(247, 185, 119, 0.16));

    --wf-danger: var(--wf-akane);
    --wf-danger-fg: #ffffff;
    --wf-danger-text: light-dark(#a22329, #ec9599);
    --wf-danger-veil: light-dark(rgba(183, 40, 46, 0.1), rgba(183, 40, 46, 0.2));

    --wf-color-info: var(--wf-tsuyukusa);
    --wf-info-fg: #1f1f1f;
    --wf-info-text: light-dark(#196088, #81c4e8);
    --wf-info-veil: light-dark(rgba(56, 161, 219, 0.1), rgba(56, 161, 219, 0.2));

    --wf-color-secondary: var(--wf-ai);
    --wf-secondary-fg: #ffffff;
    --wf-secondary-text: light-dark(#145a7e, #7fc0e6);
    --wf-secondary-veil: light-dark(rgba(22, 94, 131, 0.1), rgba(22, 94, 131, 0.25));

    /* Fixed-color components (same in both modes) */
    --wf-header-bg: var(--wf-sumi);
    --wf-header-fg: var(--wf-shirayuri);

    /* Disabled state (exempt from contrast requirements, but kept legible) */
    --wf-disabled-bg: light-dark(#f0f0f0, #333333);
    --wf-disabled-fg: light-dark(#858585, #8a8a8a);

    /* Shadows - layered depth system */
    --wf-shadow-sm: 0 1px 2px 0 light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.3));
    --wf-shadow-md:
      0 4px 6px -1px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4)),
      0 2px 4px -1px light-dark(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.2));
    --wf-shadow-lg:
      0 10px 15px -3px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4)),
      0 4px 6px -2px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.2));
    --wf-shadow-xl:
      0 20px 25px -5px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4)),
      0 10px 10px -5px light-dark(rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.2));

    /* Legacy shadow (keep for compatibility) */
    --wf-shadow-subtle: rgba(0, 0, 0, 0.08);
    --wf-overlay-light: rgba(255, 255, 255, 0.06);

    /* Typography sizes */
    --wf-font-sm: 0.875rem;
    --wf-font-md: 1rem;
    --wf-font-lg: 1.125rem;
    --wf-font-xl: 1.25rem;
    --wf-font-2xl: 1.5rem;
    --wf-font-3xl: 1.875rem;
    --wf-font-4xl: 2.25rem;

    /* Font weights */
    --wf-font-weight-light: 300;
    --wf-font-weight-normal: 400;
    --wf-font-weight-medium: 500;
    --wf-font-weight-bold: 700;
    --wf-font-weight-black: 900;

    /* Letter spacing (tracking) */
    --wf-tracking-tighter: -0.05em;
    --wf-tracking-tight: -0.025em;
    --wf-tracking-normal: 0;
    --wf-tracking-wide: 0.025em;
    --wf-tracking-wider: 0.05em;
    --wf-tracking-widest: 0.1em;

    /* Line heights */
    --wf-leading-none: 1;
    --wf-leading-tight: 1.25;
    --wf-leading-normal: 1.5;
    --wf-leading-relaxed: 1.75;
    --wf-leading-loose: 2;

    /* Radius scale */
    --wf-radius-sm: 4px;
    --wf-radius-md: 8px;
    --wf-radius-lg: 12px;
    --wf-radius-full: 9999px;

    /* Spacing scale (4px base unit for precision, aligned with 8px grid) */
    --wf-space-half: 2px; /* 0.5x */
    --wf-space-1: 4px; /* 1x base */
    --wf-space-2: 8px; /* 2x = 8px grid */
    --wf-space-3: 12px; /* 3x */
    --wf-space-4: 16px; /* 4x = 2 * 8px */
    --wf-space-5: 20px; /* 5x */
    --wf-space-6: 24px; /* 6x = 3 * 8px */
    --wf-space-7: 28px; /* 7x */
    --wf-space-8: 32px; /* 8x = 4 * 8px */
    --wf-space-10: 40px; /* 10x = 5 * 8px */
    --wf-space-12: 48px; /* 12x = 6 * 8px */
    --wf-space-14: 56px; /* 14x = 7 * 8px */
    --wf-space-16: 64px; /* 16x = 8 * 8px */
    --wf-space-20: 80px; /* 20x = 10 * 8px */

    /* Z-index（重なり順）。上の段ほど手前に表示される */
    --wf-z-dropdown: 1000; /* ドロップダウン・オートコンプリート */
    --wf-z-sticky: 1100; /* 追従ヘッダー */
    --wf-z-drawer-backdrop: 1190;
    --wf-z-drawer: 1200; /* サイドバー・モバイルのナビドロワー */
    --wf-z-modal: 1300; /* モーダル（オーバーレイ含む） */
    --wf-z-popover: 1400; /* モーダル内から開いても前面に出る */
    --wf-z-tooltip: 1500;
    --wf-z-toast: 1600; /* トースト・スナックバーは常に最前面 */

    /* Breakpoints（参照用。@media には var() を書けないため、各 CSS では同じ px 値を直接書く） */
    --wf-breakpoint-sm: 600px;
    --wf-breakpoint-md: 900px;
    /* Extended breakpoints for larger layouts */
    --wf-breakpoint-lg: 1200px;
    --wf-breakpoint-xl: 1440px;

    /* Button sizes */
    --wf-btn-py-sm: var(--wf-space-1);
    --wf-btn-px-sm: var(--wf-space-3);
    --wf-btn-py-md: var(--wf-space-2);
    --wf-btn-px-md: var(--wf-space-4);
    --wf-btn-py-lg: var(--wf-space-3);
    --wf-btn-px-lg: var(--wf-space-6);

    /* Icon sizes + gaps */
    --wf-icon-sm: 14px;
    --wf-icon-md: 16px;
    --wf-icon-lg: 20px;
    --wf-btn-gap-sm: var(--wf-space-2);
    --wf-btn-gap-md: var(--wf-space-2);
    --wf-btn-gap-lg: var(--wf-space-3);

    /* Stamp */
    --wf-stamp-weight: 3px;
    --wf-stamp-py: 6px;
    --wf-stamp-px: 12px;

    /* Custom form controls */
    --wf-checkbox-size: 18px;
    --wf-checkbox-check-left: 5px;
    --wf-checkbox-check-top: 2px;
    --wf-checkbox-check-width: 4px;
    --wf-checkbox-check-height: 8px;
    --wf-radio-size: 18px;
    --wf-radio-dot-offset: 3px;
    --wf-radio-dot-size: 8px;
    --wf-textarea-min-h: 96px;

    /* Steps */
    --wf-step-bullet-size: 24px;
    --wf-step-bullet-font: 12px;
    --wf-step-line-width: 32px;
    --wf-step-line-height: 2px;

    /* Animation & Transition durations */
    --wf-duration-fast: 150ms;
    --wf-duration-base: 250ms;
    --wf-duration-slow: 350ms;
    --wf-duration-slower: 500ms;
    /* Component-specific durations */
    --wf-skeleton-duration: 8s; /* calmer shimmer (1/4 current speed) */
    --wf-pulse-duration: 4s; /* calm pulse for gentle emphasis */

    /* Easing functions */
    --wf-ease-in: cubic-bezier(0.4, 0, 1, 1);
    --wf-ease-out: cubic-bezier(0, 0, 0.2, 1);
    --wf-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

    /* Motion control */
    --wf-enable-motion: 1; /* デフォルトで有効 */
  }

  /*
    他のトークンから導出するトークン
    カスタムプロパティ内の var() は宣言した要素で確定するため、:root だけで宣言すると
    テーマを付けた要素でも :root の値のままになる。テーマ要素でも再計算されるよう両方に宣言する。
  */
  :root,
  [class*="theme-"] {
    --wf-color-border: var(--wf-color-border-subtle);
    --wf-outline-color-hover: var(--wf-link-color-hover);
    --wf-gradient-start: var(--wf-primary-bg);
    --wf-gradient-fg: var(--wf-primary-fg);
    --wf-stamp-color: var(--wf-color-accent);
  }

  /* Reduced motion preference */
  @media (prefers-reduced-motion: reduce) {
    :root {
      --wf-enable-motion: 0; /* アニメーションを無効化 */
    }
  }

  /*
    Color mode
    - 既定は OS の設定に従う（:root の color-scheme: light dark）
    - data-theme / クラスで固定できる。任意の要素に付けると、その要素以下だけ切り替わる
  */
  .theme-light,
  [data-theme="light"] {
    color-scheme: light;
  }

  .theme-dark,
  [data-theme="dark"] {
    color-scheme: dark;
  }
}
/*
  Color themes (based on 配色参考資料.md)

  各テーマはライト／ダーク両方の値を light-dark() で持つ。
  文字に使う --wf-color-accent / --wf-link-color は、テーマ色そのものではなく
  背景に対して 4.5:1 を満たすよう明度を調整した色。淡いテーマ色は塗り（--wf-primary-bg）と
  ダークモードの文字色に使う。値は npm run check:contrast で検証している。
*/

@layer tokens {
  /* 桜（sakura） */
  .theme-sakura {
    --wf-color-bg: light-dark(#fcf0f3, #171213);
    --wf-surface-base: light-dark(#ffffff, #221b1d);
    --wf-surface-subtle: light-dark(#fff5f7, #2b2224);
    --wf-surface-muted: light-dark(#ffe8ed, #362b2d);
    --wf-color-border: light-dark(rgba(244, 179, 194, 0.3), #4c3e41);
    --wf-color-border-subtle: light-dark(rgba(244, 179, 194, 0.18), #3b3033);
    --wf-color-border-strong: light-dark(#9d7b83, #8f777d);
    --wf-color-accent: light-dark(#be3958, #f4b3c2);
    --wf-color-accent-subtle: light-dark(#fef7f9, #322024);
    --wf-color-accent-muted: light-dark(#fdeef2, #472a30);
    --wf-link-color: var(--wf-color-accent);
    --wf-link-color-hover: light-dark(#9f3049, #f9d7df);
    --wf-primary-bg: light-dark(#f4b3c2, #f4b3c2);
    --wf-primary-bg-hover: light-dark(#f098ad, #f8ced7);
    --wf-primary-bg-active: light-dark(#ec7e97, #fce8ed);
    --wf-primary-fg: #1f1f1f;
    --wf-focus: var(--wf-color-accent);
    --wf-gradient-end: light-dark(#fddede, #fddede);
  }

  /* 紅梅（koubai） */
  .theme-koubai {
    --wf-color-bg: light-dark(#fff1f5, #171214);
    --wf-surface-base: light-dark(#ffffff, #221b1e);
    --wf-surface-subtle: light-dark(#fff8fa, #2b2225);
    --wf-surface-muted: light-dark(#ffe5ed, #362b2f);
    --wf-color-border: light-dark(rgba(227, 92, 141, 0.3), #4c3e43);
    --wf-color-border-subtle: light-dark(rgba(227, 92, 141, 0.18), #3b3034);
    --wf-color-border-strong: light-dark(#997583, #8f7780);
    --wf-color-accent: light-dark(#b03360, #e878a1);
    --wf-color-accent-subtle: light-dark(#fceff4, #322026);
    --wf-color-accent-muted: light-dark(#f9dbe6, #472a34);
    --wf-link-color: var(--wf-color-accent);
    --wf-link-color-hover: light-dark(#902a4f, #ee9bb9);
    --wf-primary-bg: light-dark(#da2a6a, #e35c8d);
    --wf-primary-bg-hover: light-dark(#c3225d, #e7769f);
    --wf-primary-bg-active: light-dark(#a91d50, #ec90b2);
    --wf-primary-fg: light-dark(#ffffff, #1f1f1f);
    --wf-focus: var(--wf-color-accent);
    --wf-gradient-end: light-dark(#915fb9, #b28fce);
  }

  /* 萌黄（moe） */
  .theme-moe {
    --wf-color-bg: light-dark(#fef4b5, #141712);
    --wf-surface-base: light-dark(#ffffff, #1e221b);
    --wf-surface-subtle: light-dark(#fffcf0, #252b22);
    --wf-surface-muted: light-dark(#f5f0d6, #2f362b);
    --wf-color-border: light-dark(rgba(169, 209, 142, 0.3), #444c3e);
    --wf-color-border-subtle: light-dark(rgba(169, 209, 142, 0.18), #353b30);
    --wf-color-border-strong: light-dark(#788e69, #86947d);
    --wf-color-accent: light-dark(#4c7530, #a9d18e);
    --wf-color-accent-subtle: light-dark(#f6faf4, #273220);
    --wf-color-accent-muted: light-dark(#ecf5e6, #35472a);
    --wf-link-color: var(--wf-color-accent);
    --wf-link-color-hover: light-dark(#395824, #bfddab);
    --wf-primary-bg: light-dark(#a9d18e, #a9d18e);
    --wf-primary-bg-hover: light-dark(#98c878, #badaa4);
    --wf-primary-bg-active: light-dark(#88bf63, #cae3b9);
    --wf-primary-fg: #1f1f1f;
    --wf-focus: var(--wf-color-accent);
    --wf-gradient-end: light-dark(#d4e8a0, #d4e8a0);
  }

  /* 菊（kiku） */
  .theme-kiku {
    --wf-color-bg: light-dark(#f5f1f9, #141217);
    --wf-surface-base: light-dark(#ffffff, #1e1b22);
    --wf-surface-subtle: light-dark(#f9f7fb, #26222b);
    --wf-surface-muted: light-dark(#ede8f3, #302b36);
    --wf-color-border: light-dark(rgba(150, 123, 182, 0.3), #443e4c);
    --wf-color-border-subtle: light-dark(rgba(150, 123, 182, 0.18), #35303b);
    --wf-color-border-strong: light-dark(#88789b, #81768e);
    --wf-color-accent: light-dark(#76569b, #a68fc1);
    --wf-color-accent-subtle: light-dark(#f5f2f8, #282032);
    --wf-color-accent-muted: light-dark(#e8e2ef, #372a47);
    --wf-link-color: var(--wf-color-accent);
    --wf-link-color-hover: light-dark(#624781, #bba9d0);
    --wf-primary-bg: light-dark(#8667ab, #977db7);
    --wf-primary-bg-hover: light-dark(#77579d, #a791c2);
    --wf-primary-bg-active: light-dark(#684c89, #b7a4cd);
    --wf-primary-fg: light-dark(#ffffff, #1f1f1f);
    --wf-focus: var(--wf-color-accent);
    --wf-gradient-end: light-dark(#855ed5, #bca7e8);
  }

  /* 氷（koori） */
  .theme-koori {
    --wf-color-bg: light-dark(#f0f8fb, #121517);
    --wf-surface-base: light-dark(#ffffff, #1b2022);
    --wf-surface-subtle: light-dark(#f7fbfd, #22282b);
    --wf-surface-muted: light-dark(#e1f0f6, #2b3236);
    --wf-color-border: light-dark(rgba(126, 184, 212, 0.3), #3e474c);
    --wf-color-border-subtle: light-dark(rgba(126, 184, 212, 0.18), #30373b);
    --wf-color-border-strong: light-dark(#718a95, #798991);
    --wf-color-accent: light-dark(#307190, #7eb8d4);
    --wf-color-accent-subtle: light-dark(#f2f8fb, #202c32);
    --wf-color-accent-muted: light-dark(#e3eff6, #2a3d47);
    --wf-link-color: var(--wf-color-accent);
    --wf-link-color-hover: light-dark(#265971, #9dc9de);
    --wf-primary-bg: light-dark(#7eb8d4, #7eb8d4);
    --wf-primary-bg-hover: light-dark(#67abcc, #95c5dc);
    --wf-primary-bg-active: light-dark(#509fc5, #acd1e3);
    --wf-primary-fg: #1f1f1f;
    --wf-focus: var(--wf-color-accent);
    --wf-gradient-end: light-dark(#a8d5e8, #a8d5e8);
  }

  /* 柳（yanagi） */
  .theme-yanagi {
    --wf-color-bg: light-dark(#e9f5e3, #141712);
    --wf-surface-base: light-dark(#ffffff, #1e221b);
    --wf-surface-subtle: light-dark(#f5faf2, #252b22);
    --wf-surface-muted: light-dark(#e3f0dc, #2f362b);
    --wf-color-border: light-dark(rgba(147, 197, 114, 0.3), #434c3e);
    --wf-color-border-subtle: light-dark(rgba(147, 197, 114, 0.18), #343b30);
    --wf-color-border-strong: light-dark(#768b67, #86947d);
    --wf-color-accent: light-dark(#4b7430, #93c572);
    --wf-color-accent-subtle: light-dark(#f4f9f1, #273220);
    --wf-color-accent-muted: light-dark(#e7f2e0, #35472a);
    --wf-link-color: var(--wf-color-accent);
    --wf-link-color-hover: light-dark(#385724, #a9d18f);
    --wf-primary-bg: light-dark(#93c572, #93c572);
    --wf-primary-bg-hover: light-dark(#82bc5c, #a4ce88);
    --wf-primary-bg-active: light-dark(#72b149, #b4d79d);
    --wf-primary-fg: #1f1f1f;
    --wf-focus: var(--wf-color-accent);
    --wf-gradient-end: light-dark(#c3dfa9, #c3dfa9);
  }

  /* 紅葉（momiji） */
  .theme-momiji {
    --wf-color-bg: light-dark(#f9e4cc, #171312);
    --wf-surface-base: light-dark(#ffffff, #221d1b);
    --wf-surface-subtle: light-dark(#fdf8f0, #2b2422);
    --wf-surface-muted: light-dark(#f5ebd9, #362d2b);
    --wf-color-border: light-dark(rgba(201, 76, 40, 0.3), #4c413e);
    --wf-color-border-subtle: light-dark(rgba(201, 76, 40, 0.18), #3b3330);
    --wf-color-border-strong: light-dark(#92756c, #917d79);
    --wf-color-accent: light-dark(#9d472d, #e2896f);
    --wf-color-accent-subtle: light-dark(#faedea, #322420);
    --wf-color-accent-muted: light-dark(#f3d8d0, #47302a);
    --wf-link-color: var(--wf-color-accent);
    --wf-link-color-hover: light-dark(#7d3924, #e9a591);
    --wf-primary-bg: light-dark(#c94c28, #da6543);
    --wf-primary-bg-hover: light-dark(#af4223, #df7a5d);
    --wf-primary-bg-active: light-dark(#96391e, #e48f76);
    --wf-primary-fg: light-dark(#ffffff, #1f1f1f);
    --wf-focus: var(--wf-color-accent);
    --wf-gradient-end: light-dark(#a3361a, #e05f3e);
  }

  /* 藤（fuji） */
  .theme-fuji {
    --wf-color-bg: light-dark(#f8f4ff, #131217);
    --wf-surface-base: light-dark(#ffffff, #1d1b22);
    --wf-surface-subtle: light-dark(#fcfaff, #25222b);
    --wf-surface-muted: light-dark(#f0ebf7, #2e2b36);
    --wf-color-border: light-dark(rgba(188, 167, 232, 0.3), #423e4c);
    --wf-color-border-subtle: light-dark(rgba(188, 167, 232, 0.18), #34303b);
    --wf-color-border-strong: light-dark(#867b9d, #7d768e);
    --wf-color-accent: light-dark(#5e516f, #bca7e8);
    --wf-color-accent-subtle: light-dark(#f8f6fd, #262032);
    --wf-color-accent-muted: light-dark(#f0ecfa, #332a47);
    --wf-link-color: var(--wf-color-accent);
    --wf-link-color-hover: light-dark(#4a4057, #d5c7f0);
    --wf-primary-bg: light-dark(#bca7e8, #bca7e8);
    --wf-primary-bg-hover: light-dark(#aa8fe2, #cebfee);
    --wf-primary-bg-active: light-dark(#9776db, #e1d8f5);
    --wf-primary-fg: #1f1f1f;
    --wf-focus: var(--wf-color-accent);
    --wf-gradient-end: light-dark(#d4c8f0, #d4c8f0);
  }

  /* 鶯（uguisu） */
  .theme-uguisu {
    --wf-color-bg: light-dark(#f7f6e7, #161712);
    --wf-surface-base: light-dark(#ffffff, #20221b);
    --wf-surface-subtle: light-dark(#fcfbf3, #292b22);
    --wf-surface-muted: light-dark(#efeeda, #33362b);
    --wf-color-border: light-dark(rgba(124, 140, 75, 0.3), #484c3e);
    --wf-color-border-subtle: light-dark(rgba(124, 140, 75, 0.18), #383b30);
    --wf-color-border-strong: light-dark(#7b8362, #8e947d);
    --wf-color-accent: light-dark(#5d6938, #aab97c);
    --wf-color-accent-subtle: light-dark(#f2f4ed, #2d3220);
    --wf-color-accent-muted: light-dark(#e2e6d7, #40472a);
    --wf-link-color: var(--wf-color-accent);
    --wf-link-color-hover: light-dark(#454e2a, #bbc797);
    --wf-primary-bg: light-dark(#6d7b42, #7f8f4d);
    --wf-primary-bg-hover: light-dark(#5b6737, #91a358);
    --wf-primary-bg-active: light-dark(#4a532d, #9eaf6a);
    --wf-primary-fg: light-dark(#ffffff, #1f1f1f);
    --wf-focus: var(--wf-color-accent);
    --wf-gradient-end: light-dark(#4f5c25, #7c913a);
  }

  /* 雪（yuki） */
  .theme-yuki {
    --wf-color-bg: light-dark(#e8eef2, #121517);
    --wf-surface-base: light-dark(#ffffff, #1b1f22);
    --wf-surface-subtle: light-dark(#f7fafb, #22272b);
    --wf-surface-muted: light-dark(#dce5ea, #2b3236);
    --wf-color-border: light-dark(rgba(90, 122, 143, 0.3), #3e464c);
    --wf-color-border-subtle: light-dark(rgba(90, 122, 143, 0.18), #30373b);
    --wf-color-border-strong: light-dark(#6a818f, #798791);
    --wf-color-accent: light-dark(#4b6678, #8fa8b8);
    --wf-color-accent-subtle: light-dark(#eff2f4, #202b32);
    --wf-color-accent-muted: light-dark(#dbe2e6, #2a3b47);
    --wf-link-color: var(--wf-color-accent);
    --wf-link-color-hover: light-dark(#3b515f, #a8bbc8);
    --wf-primary-bg: light-dark(#59798d, #6b8ca2);
    --wf-primary-bg-hover: light-dark(#4d697a, #7e9bae);
    --wf-primary-bg-active: light-dark(#415967, #91a9ba);
    --wf-primary-fg: light-dark(#ffffff, #1f1f1f);
    --wf-focus: var(--wf-color-accent);
    --wf-gradient-end: light-dark(#3f5f74, #628eaa);
  }
}
@layer base {
  /* Reset / Base */
  * {
    box-sizing: border-box;
  }
  *::before,
  *::after {
    box-sizing: inherit;
  }
  html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
  }
  body {
    margin: 0;
    font-family: var(--wf-font-family);
    color: var(--wf-color-text);
    background: var(--wf-color-bg);
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
  }

  /* Washi paper texture overlay (和紙のテクスチャー) */
  /* ダークでは白い縞が格子模様として浮き、細い文字の可読性を下げるため薄くする */
  body::before {
    --wf-texture-color: light-dark(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02));
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
      repeating-linear-gradient(
        90deg,
        transparent,
        transparent 2px,
        var(--wf-texture-color) 2px,
        var(--wf-texture-color) 4px
      ),
      repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        var(--wf-texture-color) 2px,
        var(--wf-texture-color) 4px
      );
    pointer-events: none;
    opacity: 0.3;
    z-index: -1;
  }

  /* Form controls: ブラウザ既定（約 13px のゴシック体・等幅）ではなく本文のフォントを継承する */
  button,
  input,
  select,
  textarea {
    font: inherit;
    letter-spacing: inherit;
  }

  /* Typography */
  h1,
  h2,
  h3 {
    line-height: 1.25;
    margin: 0 0 var(--wf-space-8);
  }
  h4,
  h5,
  h6 {
    line-height: 1.25;
    margin: 0 0 var(--wf-space-4);
  }
  h1 {
    font-size: 2rem;
  }
  h2 {
    font-size: 1.5rem;
  }
  h3 {
    font-size: 1.25rem;
  }
  h4 {
    font-size: 1.125rem;
  }
  h5 {
    font-size: 1rem;
  }
  h6 {
    font-size: 0.875rem;
  }
  p {
    margin: 0 0 var(--wf-space-4);
  }
  ul,
  ol {
    margin: 0 0 var(--wf-space-4);
    padding-left: 1.25rem;
  }
  hr {
    border: 0;
    border-top: 1px solid var(--wf-color-border);
    margin: var(--wf-space-6) 0;
  }

  a {
    color: var(--wf-link-color);
    text-decoration: none;
    border-bottom: 1px solid transparent;
  }
  a:hover {
    border-bottom-color: currentColor;
    color: var(--wf-link-color-hover);
  }
  :focus {
    outline: 2px solid var(--wf-focus);
    outline-offset: 2px;
  }
  :focus:not(:focus-visible) {
    outline: none;
  }
  :focus-visible {
    outline: 2px solid var(--wf-focus);
    outline-offset: 2px;
  }

  /* Code / Preformatted */
  code,
  kbd,
  samp {
    font-family:
      ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 0.95em;
  }
  code {
    background: var(--wf-surface-muted);
    padding: 0 4px;
    border-radius: var(--wf-radius-sm);
  }
  pre {
    background: var(--wf-surface-muted);
    border: 1px solid var(--wf-color-border);
    border-radius: var(--wf-radius-md);
    padding: var(--wf-space-4);
    overflow: auto;
  }
  pre code {
    background: transparent;
    padding: 0;
  }

  /* Blockquote */
  blockquote {
    margin: 0 0 var(--wf-space-4);
    padding-left: var(--wf-space-3);
    border-left: 3px solid var(--wf-color-border-strong);
    color: var(--wf-color-muted);
  }

  /* Inline elements */
  small {
    font-size: 80%;
  }
  mark {
    background-color: var(--wf-warning-veil);
    color: inherit;
    padding: 0 0.2em;
  }
  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  del {
    text-decoration: line-through;
    opacity: 0.8;
  }
  ins {
    text-decoration: underline;
    text-decoration-style: dotted;
  }

  /* Lists */
  dl {
    margin: 0 0 var(--wf-space-4);
  }
  dt {
    font-weight: 700;
  }
  dd {
    margin: 0 0 var(--wf-space-4) var(--wf-space-4);
  }

  /* Figure */
  figure {
    margin: 0 0 var(--wf-space-4);
  }
  figcaption {
    font-size: var(--wf-font-sm);
    color: var(--wf-color-muted);
    text-align: center;
    margin-top: var(--wf-space-2);
  }
}
/*!
 * @component Container
 * @description Page width container.
 * @selector .wf-container
 * @variants .wf-container-narrow, .wf-container-wide, .wf-container-xl
 * @variables --wf-space-3, --wf-space-4
 */
@layer components {
  .wf-container {
    max-width: 960px;
    margin: 0 auto;
    padding: var(--wf-space-4);
  }
  @media (max-width: 600px) {
    .wf-container {
      padding: var(--wf-space-3);
    }
  }

  /* Container width variants */
  .wf-container-narrow {
    max-width: 720px;
    margin: 0 auto;
    padding: var(--wf-space-4);
  }
  .wf-container-wide {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--wf-space-4);
  }
  .wf-container-xl {
    max-width: 1440px;
    margin: 0 auto;
    padding: var(--wf-space-4);
  }
  @media (max-width: 600px) {
    .wf-container-narrow,
    .wf-container-wide,
    .wf-container-xl {
      padding: var(--wf-space-3);
    }
  }
}
/*!
 * @component Buttons
 * @description Buttons component.
 * @selector .wf-btn
 * @variants .wf-icon, .wf-btn-primary, .wf-btn-gradient, .wf-btn-outline, .wf-btn-subtle
 * @variables --wf-btn-gap-md, --wf-btn-py-md, --wf-btn-px-md, --wf-color-border-strong, --wf-radius-md
 */
@layer components {
  /* @meta id="buttons" description="Button styles including primary, outline, subtle, and gradient variants." */
  /*
  Buttons
  ボタン
*/
  /* Buttons */
  .wf-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--wf-btn-gap-md);
    padding: var(--wf-btn-py-md) var(--wf-btn-px-md);
    border: 1px solid var(--wf-color-border-strong);
    border-radius: var(--wf-radius-md);
    background: var(--wf-surface-base);
    color: var(--wf-color-text);
    text-decoration: none;
    cursor: pointer;
    transition:
      filter 0.15s ease,
      background-color 0.15s ease,
      border-color 0.15s ease;
  }
  .wf-btn:hover {
    filter: brightness(0.98);
  }
  .wf-btn .wf-icon {
    width: var(--wf-icon-md);
    height: var(--wf-icon-md);
    display: inline-block;
    line-height: 1;
    flex: 0 0 auto;
  }

  .wf-btn-primary {
    background: var(--wf-primary-bg);
    border-color: transparent;
    color: var(--wf-primary-fg);
  }
  .wf-btn-primary:hover,
  .wf-btn-primary:focus-visible {
    background: var(--wf-primary-bg-hover);
  }
  .wf-btn-primary:active {
    background: var(--wf-primary-bg-active);
  }

  /* Japanese gradient button (和風グラデーション) */
  .wf-btn-gradient {
    background: linear-gradient(135deg, var(--wf-gradient-start), var(--wf-gradient-end));
    border-color: transparent;
    color: var(--wf-gradient-fg);
    font-weight: 700;
    letter-spacing: 0.1em;
    position: relative;
    overflow: hidden;
  }

  .wf-btn-gradient::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
  }

  .wf-btn-gradient:hover::before {
    left: 100%;
  }

  .wf-btn-gradient:hover {
    filter: brightness(1.1);
  }

  .wf-btn-outline {
    background: var(--wf-surface-base);
    color: var(--wf-link-color);
    border-color: var(--wf-link-color);
  }
  .wf-btn-outline:hover,
  .wf-btn-outline:focus-visible {
    color: var(--wf-outline-color-hover);
    border-color: var(--wf-outline-color-hover);
  }
  .wf-btn-subtle {
    background: var(--wf-surface-subtle);
    color: var(--wf-color-text);
    border-color: var(--wf-color-border);
  }

  /* Status buttons */
  .wf-btn-success {
    background: var(--wf-success);
    color: var(--wf-success-fg);
    border-color: transparent;
  }
  .wf-btn-warning {
    background: var(--wf-warning);
    color: var(--wf-warning-fg);
    border-color: transparent;
  }
  .wf-btn-secondary {
    background: var(--wf-color-secondary);
    color: var(--wf-secondary-fg);
    border-color: transparent;
  }
  .wf-btn-info {
    background: var(--wf-color-info);
    color: var(--wf-info-fg);
    border-color: transparent;
  }

  .wf-btn-danger {
    background: var(--wf-danger);
    color: var(--wf-danger-fg);
    border-color: transparent;
  }
  /* Outline status buttons */
  .wf-btn-outline-secondary,
  .wf-btn-outline-info,
  .wf-btn-outline-success,
  .wf-btn-outline-warning,
  .wf-btn-outline-danger {
    background: var(--wf-surface-base);
  }
  .wf-btn-outline-secondary {
    color: var(--wf-secondary-text);
    border-color: var(--wf-secondary-text);
  }
  .wf-btn-outline-info {
    color: var(--wf-info-text);
    border-color: var(--wf-info-text);
  }
  .wf-btn-outline-success {
    color: var(--wf-success-text);
    border-color: var(--wf-success-text);
  }
  .wf-btn-outline-warning {
    color: var(--wf-warning-text);
    border-color: var(--wf-warning-text);
  }
  .wf-btn-outline-danger {
    color: var(--wf-danger-text);
    border-color: var(--wf-danger-text);
  }

  /* Sizes */
  .wf-btn-sm {
    padding: var(--wf-btn-py-sm) var(--wf-btn-px-sm);
    font-size: var(--wf-font-sm);
    gap: var(--wf-btn-gap-sm);
  }
  .wf-btn-lg {
    padding: var(--wf-btn-py-lg) var(--wf-btn-px-lg);
    font-size: var(--wf-font-lg);
    gap: var(--wf-btn-gap-lg);
  }
  .wf-btn-sm .wf-icon {
    width: var(--wf-icon-sm);
    height: var(--wf-icon-sm);
  }
  .wf-btn-lg .wf-icon {
    width: var(--wf-icon-lg);
    height: var(--wf-icon-lg);
  }
  .wf-btn-icon {
    padding-left: var(--wf-btn-py-md);
    padding-right: var(--wf-btn-py-md);
    gap: 0;
  }
  .wf-btn-icon.wf-btn-sm {
    padding-left: var(--wf-btn-py-sm);
    padding-right: var(--wf-btn-py-sm);
  }
  .wf-btn-icon.wf-btn-lg {
    padding-left: var(--wf-btn-py-lg);
    padding-right: var(--wf-btn-py-lg);
  }

  /* Loading */
  .wf-btn.is-loading {
    position: relative;
    pointer-events: none;
    /* 文字だけ隠し、color は残してスピナーをボタンの前景色で描く */
    -webkit-text-fill-color: transparent;
  }
  .wf-btn.is-loading > * {
    visibility: hidden;
  }
  .wf-btn.is-loading::after {
    content: "";
    position: absolute;
    /* 中央寄せに transform を使わない（アニメーションの transform と競合してずれるため） */
    inset: 0;
    margin: auto;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, currentColor 25%, transparent);
    border-top-color: currentColor;
    animation-name: wf-btn-spin;
    animation-duration: calc(var(--wf-enable-motion, 1) * 0.8s);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
  /* spinner.css の wf-spin と同名にすると、後から読み込まれた定義で上書きされる */
  @keyframes wf-btn-spin {
    to {
      transform: rotate(360deg);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .wf-btn.is-loading::after {
      animation: none;
    }
  }

  .wf-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
}
/*!
 * @component Stamp
 * @description Stamp component.
 * @selector .wf-stamp
 * @variants 
 * @variables --wf-stamp-py, --wf-stamp-px, --wf-stamp-weight, --wf-stamp-color, --wf-surface-base
 */
@layer components {
  /* Stamp (判子) */
  .wf-stamp {
    display: inline-block;
    padding: var(--wf-stamp-py) var(--wf-stamp-px);
    border: var(--wf-stamp-weight) solid var(--wf-stamp-color);
    color: var(--wf-stamp-color);
    background: var(--wf-surface-base);
    border-radius: var(--wf-radius-full);
    font-weight: 700;
    letter-spacing: 0.15em;
    text-decoration: none;
    line-height: 1;
  }
  .wf-stamp:hover {
    filter: saturate(1.1);
  }
}
/*!
 * @component Cards
 * @description Cards component.
 * @selector .wf-card
 * @variants .wf-card-washi
 * @variables --wf-surface-base, --wf-color-border, --wf-radius-md, --wf-space-4, --wf-overlay-light
 */
@layer components {
  /* @meta id="cards" description="Card component with standard and 'washi' (Japanese paper) texture variants." */
  /*
  Cards
  カード
*/
  .wf-card {
    background: var(--wf-surface-base);
    border: 1px solid var(--wf-color-border);
    border-radius: var(--wf-radius-md);
    padding: var(--wf-space-4);
    /* Grid/Flex 内でのはみ出し防止（min-width: auto を打ち消し） */
    min-width: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  }
  .wf-card-washi {
    border: none;
    border-radius: 0;
    padding: 3rem;
    position: relative;
    box-shadow:
      0 4px 6px rgba(0, 0, 0, 0.1),
      inset 0 0 30px var(--wf-overlay-light);
    /* Washi paper texture (和紙のテクスチャー) */
    background-color: var(--wf-surface-base);
    background-image:
      /* 細かい繊維パターン */
      repeating-linear-gradient(
        90deg,
        transparent,
        transparent 1px,
        rgba(0, 0, 0, 0.02) 1px,
        rgba(0, 0, 0, 0.02) 2px
      ),
      repeating-linear-gradient(
        0deg,
        transparent,
        transparent 1px,
        rgba(0, 0, 0, 0.02) 1px,
        rgba(0, 0, 0, 0.02) 2px
      ),
      /* 不規則な繊維の流れ */
        repeating-linear-gradient(
          45deg,
          transparent,
          transparent 3px,
          rgba(0, 0, 0, 0.015) 3px,
          rgba(0, 0, 0, 0.015) 4px
        ),
      repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 3px,
        rgba(0, 0, 0, 0.015) 3px,
        rgba(0, 0, 0, 0.015) 4px
      ),
      /* 光の反射の違い */
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
      radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
      /* わずかな凹凸感 */
        linear-gradient(
          180deg,
          rgba(0, 0, 0, 0.03) 0%,
          transparent 20%,
          transparent 80%,
          rgba(0, 0, 0, 0.03) 100%
        );
  }

  /* Decorative corner borders (飾り枠) - uses theme accent color */
  .wf-card-washi::before,
  .wf-card-washi::after {
    content: "";
    position: absolute;
    width: 30px;
    height: 30px;
    border: 2px solid var(--wf-color-accent);
  }

  .wf-card-washi::before {
    top: 10px;
    left: 10px;
    border-right: none;
    border-bottom: none;
  }

  .wf-card-washi::after {
    bottom: 10px;
    right: 10px;
    border-left: none;
    border-top: none;
  }
}
/*!
 * @component Forms
 * @description Forms component.
 * @selector .wf-label
 * @variants .wf-input, .wf-textarea, .wf-select, .wf-field, .wf-checkbox
 * @variables --wf-space-2, --wf-color-accent, --wf-space-3, --wf-color-border-strong, --wf-radius-md
 */
@layer components {
  /* @meta id="forms" description="Form controls including inputs, selects, checkboxes, radios, and validation states." */
  /*
  Forms
  フォーム
*/
  .wf-label {
    display: block;
    margin: 0 0 var(--wf-space-2);
    font-weight: 700;
    letter-spacing: 0.1em;
  }

  /* 和風の装飾記号（任意）。読み上げ対象から外すため代替テキストを空にする */
  .wf-label-mark::before {
    content: "◆";
    content: "◆" / "";
    color: var(--wf-color-accent);
    margin-right: 0.5rem;
  }
  .wf-input,
  .wf-textarea,
  .wf-select {
    width: 100%;
    padding: var(--wf-space-2) var(--wf-space-3);
    border: 1px solid var(--wf-color-border-strong);
    border-radius: var(--wf-radius-md);
    background: var(--wf-surface-base);
    color: var(--wf-color-text);
  }
  .wf-textarea {
    min-height: var(--wf-textarea-min-h);
    resize: vertical;
  }

  /* Custom select with arrow icon */
  .wf-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image:
      linear-gradient(45deg, transparent 50%, var(--wf-color-accent) 50%),
      linear-gradient(135deg, var(--wf-color-accent) 50%, transparent 50%);
    background-repeat: no-repeat;
    background-position:
      right calc(var(--wf-space-3) + 6px) center,
      right var(--wf-space-3) center;
    background-size: 6px 6px;
    padding-right: calc(var(--wf-space-3) + 20px);
  }

  .wf-select:focus {
    outline: 2px solid var(--wf-focus);
    outline-offset: 2px;
  }

  /* Date, Time, DateTime inputs */
  .wf-input[type="date"],
  .wf-input[type="time"],
  .wf-input[type="datetime-local"],
  .wf-input[type="month"],
  .wf-input[type="week"] {
    /* Ensure consistent appearance across browsers */
    position: relative;
    cursor: pointer;
  }

  /* WebKit browsers (Chrome, Safari, Edge) - style the calendar icon */
  .wf-input[type="date"]::-webkit-calendar-picker-indicator,
  .wf-input[type="time"]::-webkit-calendar-picker-indicator,
  .wf-input[type="datetime-local"]::-webkit-calendar-picker-indicator,
  .wf-input[type="month"]::-webkit-calendar-picker-indicator,
  .wf-input[type="week"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s ease;
  }

  .wf-input[type="date"]::-webkit-calendar-picker-indicator:hover,
  .wf-input[type="time"]::-webkit-calendar-picker-indicator:hover,
  .wf-input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
  .wf-input[type="month"]::-webkit-calendar-picker-indicator:hover,
  .wf-input[type="week"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
  }

  /* Firefox - style the clear button */
  .wf-input[type="date"]::-webkit-clear-button,
  .wf-input[type="time"]::-webkit-clear-button,
  .wf-input[type="datetime-local"]::-webkit-clear-button {
    display: none;
  }

  .wf-field {
    margin-bottom: var(--wf-space-4);
  }

  /* Select options styling
   * Note: Browser support for <option> element styling is limited:
   * - Safari: Most styles are not applied (browser default is used)
   * - Chrome: Limited support for background, color, and font properties
   * - Firefox: Better support, but still limited
   * For full custom styling, consider using a custom dropdown component
   * built with <div> elements, though this requires additional JavaScript
   * and careful attention to accessibility (ARIA roles, keyboard navigation).
   */
  .wf-select option {
    padding: var(--wf-space-2) var(--wf-space-3);
    background: var(--wf-surface-base);
    color: var(--wf-color-text);
    font-weight: 500;
  }

  .wf-select option:checked {
    background: var(--wf-primary-bg);
    color: var(--wf-primary-fg);
    font-weight: 700;
  }

  .wf-select option:hover {
    background: var(--wf-surface-muted);
    color: var(--wf-color-accent);
  }

  /* Custom checkbox */
  .wf-checkbox {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: var(--wf-checkbox-size);
    height: var(--wf-checkbox-size);
    border: 2px solid var(--wf-color-border-strong);
    border-radius: var(--wf-radius-sm);
    background: var(--wf-surface-base);
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    flex-shrink: 0;
  }

  .wf-checkbox:hover {
    border-color: var(--wf-color-accent);
  }

  .wf-checkbox:focus {
    outline: 2px solid var(--wf-focus);
    outline-offset: 2px;
  }

  .wf-checkbox:checked {
    background: var(--wf-color-accent);
    border-color: var(--wf-color-accent);
  }

  .wf-checkbox:checked::after {
    content: "";
    position: absolute;
    left: var(--wf-checkbox-check-left);
    top: var(--wf-checkbox-check-top);
    width: var(--wf-checkbox-check-width);
    height: var(--wf-checkbox-check-height);
    border: solid var(--wf-color-accent-fg);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }

  .wf-checkbox:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--wf-disabled-bg);
    border-color: var(--wf-color-border);
  }

  .wf-checkbox:disabled:checked {
    background: var(--wf-disabled-fg);
  }

  /* Custom radio */
  .wf-radio {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: var(--wf-radio-size);
    height: var(--wf-radio-size);
    border: 2px solid var(--wf-color-border-strong);
    border-radius: 50%;
    background: var(--wf-surface-base);
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    flex-shrink: 0;
  }

  .wf-radio:hover {
    border-color: var(--wf-color-accent);
  }

  .wf-radio:focus {
    outline: 2px solid var(--wf-focus);
    outline-offset: 2px;
  }

  .wf-radio:checked {
    border-color: var(--wf-color-accent);
  }

  .wf-radio:checked::after {
    content: "";
    position: absolute;
    left: var(--wf-radio-dot-offset);
    top: var(--wf-radio-dot-offset);
    width: var(--wf-radio-dot-size);
    height: var(--wf-radio-dot-size);
    border-radius: 50%;
    background: var(--wf-color-accent);
  }

  .wf-radio:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--wf-disabled-bg);
    border-color: var(--wf-color-border);
  }

  .wf-radio:disabled:checked::after {
    background: var(--wf-disabled-fg);
  }

  .wf-check {
    display: inline-flex;
    align-items: center;
    gap: var(--wf-space-2);
    cursor: pointer;
    user-select: none;
  }
  .wf-input:disabled,
  .wf-textarea:disabled,
  .wf-select:disabled {
    background: var(--wf-disabled-bg);
    color: var(--wf-disabled-fg);
    border-color: var(--wf-color-border);
  }
  /* 入力欄の直後に置く補足・検証メッセージ。入力欄に密着しないよう上に余白を取る */
  .wf-help,
  .wf-error,
  .wf-success,
  .wf-warning {
    margin-top: var(--wf-space-1);
  }
  .wf-help {
    color: var(--wf-color-muted);
    font-size: var(--wf-font-sm);
  }
  .wf-error {
    color: var(--wf-danger-text);
    font-size: var(--wf-font-sm);
  }
  .wf-input.is-invalid,
  .wf-textarea.is-invalid,
  .wf-select.is-invalid {
    border-color: var(--wf-danger-text);
  }
  .wf-label .wf-required {
    color: var(--wf-danger-text);
    margin-left: var(--wf-space-1);
  }

  /* Success/Warning states */
  .wf-success {
    color: var(--wf-success-text);
  }
  .wf-warning {
    color: var(--wf-warning-text);
  }
  .wf-input.is-success,
  .wf-textarea.is-success,
  .wf-select.is-success {
    border-color: var(--wf-success-text);
  }
  .wf-input.is-warning,
  .wf-textarea.is-warning,
  .wf-select.is-warning {
    border-color: var(--wf-warning-text);
  }

  /* Accessibility: Reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .wf-checkbox,
    .wf-radio {
      transition: none;
    }
  }
}
/*!
 * @component Header
 * @description Header component.
 * @selector .wf-header
 * @variants .wf-header--no-stripe, .wf-header-noren
 * @variables --wf-header-bg, --wf-header-fg, --wf-color-accent, --wf-surface-subtle
 */
@layer components {
  /* Header - Default style with noren (暖簾) design */
  /* 墨色グラデーション + ストライプ装飾がデフォルト。墨色はモードによらず固定なので、文字色も固定の --wf-header-fg を使う */
  /* .wf-header-noren は後方互換のためのエイリアス */
  .wf-header,
  .wf-header-noren {
    background: linear-gradient(
      180deg,
      var(--wf-header-bg) 0%,
      color-mix(in srgb, var(--wf-header-bg) 95%, transparent) 100%
    );
    color: var(--wf-header-fg);
    padding: 2rem 0;
    position: relative;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
  }
  .wf-header h1,
  .wf-header h2,
  .wf-header-noren h1,
  .wf-header-noren h2 {
    margin: 0;
    font-weight: 900;
    letter-spacing: 0.2em;
  }

  /* Theme color stripe (テーマカラーストライプ) - デフォルトで全ヘッダーに適用 */
  .wf-header::after,
  .wf-header-noren::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: repeating-linear-gradient(
      90deg,
      var(--wf-primary-bg),
      var(--wf-primary-bg) 10px,
      var(--wf-header-fg) 10px,
      var(--wf-header-fg) 20px,
      var(--wf-primary-bg) 20px,
      var(--wf-primary-bg) 30px
    );
  }

  /* Modifier: ストライプなしヘッダー */
  .wf-header--no-stripe::after {
    display: none;
  }
}
/*!
 * @component Steps
 * @description Steps component.
 * @selector .wf-steps
 * @variants .wf-step
 * @variables --wf-space-4, --wf-space-2, --wf-color-muted, --wf-step-bullet-size, --wf-radius-full
 */
@layer components {
  /* Steps */
  .wf-steps {
    display: flex;
    align-items: center;
    gap: var(--wf-space-4);
    padding: 0;
    margin: 0;
    list-style: none;
  }
  .wf-step {
    display: flex;
    align-items: center;
    gap: var(--wf-space-2);
    color: var(--wf-color-muted);
  }
  .wf-step__bullet {
    width: var(--wf-step-bullet-size);
    height: var(--wf-step-bullet-size);
    border-radius: var(--wf-radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--wf-color-border-strong);
    background: var(--wf-surface-base);
    color: var(--wf-color-muted);
    font-size: var(--wf-step-bullet-font);
    font-weight: 700;
  }

  /* Kanji numbers support (漢数字) */
  /* Use data-kanji attribute: <span class="wf-step__bullet" data-kanji="壱">1</span> */
  .wf-step__bullet[data-kanji] {
    font-size: 0;
  }

  .wf-step__bullet[data-kanji]::before {
    content: attr(data-kanji);
    font-size: var(--wf-step-bullet-font);
  }
  .wf-step.is-current .wf-step__bullet {
    border-color: var(--wf-color-accent);
    color: var(--wf-color-accent);
  }
  .wf-step.is-done .wf-step__bullet {
    background: var(--wf-color-accent);
    color: var(--wf-color-accent-fg);
    border-color: var(--wf-color-accent);
  }
  .wf-step::after {
    content: "";
    width: var(--wf-step-line-width);
    height: var(--wf-step-line-height);
    background: var(--wf-color-border-strong);
    display: inline-block;
  }
  .wf-step:last-child::after {
    display: none;
  }
  .wf-step.is-done::after {
    background: var(--wf-color-accent);
  }
  .wf-step.is-current::after {
    background: var(--wf-color-border-strong);
  }

  /* Mobile responsive */
  @media (max-width: 600px) {
    .wf-steps {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--wf-space-3);
    }

    .wf-step {
      width: 100%;
    }

    .wf-step::after {
      display: none;
    }
  }
}
/*!
 * @component Alerts
 * @description Alerts component.
 * @selector .wf-alert
 * @variants .wf-alert-success, .wf-alert-warning, .wf-alert-danger, .wf-icon, .wf-alert-sm
 * @variables --wf-space-3, --wf-space-4, --wf-color-border, --wf-radius-md, --wf-surface-muted
 */
@layer components {
  /* Alerts */
  .wf-alert {
    padding: var(--wf-space-3) var(--wf-space-4);
    border: 1px solid var(--wf-color-border);
    border-radius: var(--wf-radius-md);
    background: var(--wf-surface-muted);
  }
  .wf-alert h4 {
    margin: 0 0 var(--wf-space-2);
    font-size: 1rem;
  }
  /* 背景は半透明（veil）なので、文字色は -text トークンで veil 上の 4.5:1 を保証する */
  .wf-alert-secondary {
    border-color: var(--wf-secondary-text);
    background: var(--wf-secondary-veil);
    color: var(--wf-secondary-text);
  }
  .wf-alert-info {
    border-color: var(--wf-info-text);
    background: var(--wf-info-veil);
    color: var(--wf-info-text);
  }
  .wf-alert-success {
    border-color: var(--wf-success-text);
    background: var(--wf-success-veil);
  }
  .wf-alert-warning {
    border-color: var(--wf-warning-text);
    background: var(--wf-warning-veil);
  }
  .wf-alert-danger {
    border-color: var(--wf-danger-text);
    background: var(--wf-danger-veil);
  }
  .wf-alert.has-icon {
    display: flex;
    align-items: flex-start;
    gap: var(--wf-space-3);
  }
  .wf-alert.has-icon .wf-icon {
    width: var(--wf-icon-lg);
    height: var(--wf-icon-lg);
    margin-top: 2px;
  }
  .wf-alert-sm {
    padding: var(--wf-space-2) var(--wf-space-3);
    font-size: var(--wf-font-sm);
  }
  .wf-alert-lg {
    padding: var(--wf-space-4) var(--wf-space-6);
    font-size: var(--wf-font-lg);
  }

  /* Badges */
  .wf-badge {
    display: inline-block;
    padding: var(--wf-space-half) var(--wf-space-2);
    border-radius: var(--wf-radius-full);
    font-size: var(--wf-font-sm);
    line-height: 1.2;
  }
  .wf-badge-secondary {
    background: var(--wf-color-secondary);
    color: var(--wf-secondary-fg);
  }
  .wf-badge-info {
    background: var(--wf-color-info);
    color: var(--wf-info-fg);
  }
  .wf-badge-success {
    background: var(--wf-success);
    color: var(--wf-success-fg);
  }
  .wf-badge-warning {
    background: var(--wf-warning);
    color: var(--wf-warning-fg);
  }
  .wf-badge-danger {
    background: var(--wf-danger);
    color: var(--wf-danger-fg);
  }
}
/*!
 * @component Table
 * @description Table component.
 * @selector .wf-table-wrap
 * @variants .wf-table, .wf-sort, .wf-table-striped, .wf-table-hover, .wf-table-bordered
 * @variables --wf-surface-base, --wf-color-border, --wf-color-muted, --wf-color-accent, --wf-surface-muted
 */
@layer components {
  /* @meta id="table" description="Table styles with striped, hover, and responsive variants." */
  /*
  Table
  テーブル
*/
  .wf-table-wrap {
    overflow: auto;
  }
  .wf-table {
    width: 100%;
    min-width: 500px; /* 最小幅を設定してカラム圧縮を防ぐ */
    border-collapse: separate;
    border-spacing: 0;
    background: var(--wf-surface-base);
  }
  .wf-table th,
  .wf-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--wf-color-border);
    text-align: left;
  }
  .wf-table thead th {
    background: var(--wf-surface-base);
    position: relative;
  }
  .wf-table thead th[aria-sort="ascending"]::after {
    content: "▲";
    font-size: 0.75em;
    margin-left: 6px;
    color: var(--wf-color-muted);
  }
  .wf-table thead th[aria-sort="descending"]::after {
    content: "▼";
    font-size: 0.75em;
    margin-left: 6px;
    color: var(--wf-color-muted);
  }
  .wf-table .wf-sort {
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .wf-table .wf-sort:hover {
    color: var(--wf-color-accent);
  }

  /* Variants */
  .wf-table-striped tbody tr:nth-child(odd) {
    background: var(--wf-surface-muted);
  }
  .wf-table-hover tbody tr:hover {
    background: var(--wf-surface-subtle);
  }
  .wf-table-bordered {
    border: 1px solid var(--wf-color-border);
  }
  .wf-table-bordered th,
  .wf-table-bordered td {
    border-right: 1px solid var(--wf-color-border);
  }
  .wf-table-bordered td:last-child,
  .wf-table-bordered th:last-child {
    border-right: 0;
  }
  .wf-table-sticky thead th {
    position: sticky;
    top: 0;
    z-index: 1;
  }

  /* Sizes */
  .wf-table-sm th,
  .wf-table-sm td {
    padding: 6px 8px;
    font-size: var(--wf-font-sm);
  }
  .wf-table-lg th,
  .wf-table-lg td {
    padding: 14px 16px;
    font-size: var(--wf-font-lg);
  }
  .wf-table-dense th,
  .wf-table-dense td {
    padding: 6px 8px;
    font-size: var(--wf-font-sm);
  }
  .wf-table-loose th,
  .wf-table-loose td {
    padding: 14px 16px;
    font-size: var(--wf-font-lg);
  }

  /* モバイル対応 */
  @media (max-width: 600px) {
    .wf-table {
      min-width: 400px; /* モバイルでは少し小さく */
    }
  }
}
/*!
 * @component Modal
 * @description Modal component.
 * @selector .wf-modal-overlay
 * @variants .wf-modal, .wf-modal-sm, .wf-modal-lg, .wf-modal--scroll, .wf-modal-fullscreen
 * @variables --wf-surface-base, --wf-color-text, --wf-radius-md, --wf-color-border, --wf-space-2
 */
@layer components {
  /* @meta id="modal" description="Modal dialog component with overlay, header, body, and footer sections." */
  /*
  Modal
  モーダル
*/
  /* Modal */
  .wf-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--wf-z-modal);
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(1px);
  }
  .wf-modal-overlay.is-open {
    display: flex;
  }

  .wf-modal {
    background: var(--wf-surface-base);
    color: var(--wf-color-text);
    width: min(92vw, 640px);
    display: flex;
    flex-direction: column;
    border-radius: var(--wf-radius-md);
    border: 1px solid var(--wf-color-border);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
  }
  /*
   * ネイティブの <dialog class="wf-modal"> にも対応する（showModal() で開く）。
   * 最前面への表示・フォーカスの閉じ込めと復元・Esc での終了はブラウザが行う。
   */
  dialog.wf-modal {
    margin: auto; /* 画面中央に置く（モバイル用の margin より優先） */
    padding: 0;
    max-height: calc(100dvh - 2 * var(--wf-space-4));
  }
  dialog.wf-modal:not([open]) {
    display: none;
  }
  /* showModal() 直後はダイアログ本体にフォーカスが移るため、本体の枠は出さない（中の要素には出る） */
  dialog.wf-modal:focus-visible {
    outline: none;
  }
  dialog.wf-modal::backdrop {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(1px);
  }
  .wf-modal-sm {
    width: min(92vw, 420px);
  }
  .wf-modal-lg {
    width: min(92vw, 840px);
  }

  .wf-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wf-space-2);
    padding: var(--wf-space-3) var(--wf-space-4);
    border-bottom: 1px solid var(--wf-color-border);
  }
  .wf-modal__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
  }
  .wf-modal__close {
    appearance: none;
    border: 0;
    background: transparent;
    cursor: pointer;
    color: var(--wf-color-muted);
    padding: var(--wf-space-1);
    border-radius: var(--wf-radius-sm);
    transition:
      color 0.2s ease,
      background-color 0.2s ease;
  }
  .wf-modal__close:hover,
  .wf-modal__close:focus-visible {
    color: var(--wf-color-accent);
    background: var(--wf-surface-muted);
  }

  .wf-modal__body {
    padding: var(--wf-space-4);
  }
  .wf-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--wf-space-2);
    padding: var(--wf-space-3) var(--wf-space-4);
    border-top: 1px solid var(--wf-color-border);
  }

  /* Footer alignment modifiers */
  .wf-modal__footer.is-start {
    justify-content: flex-start;
  }
  .wf-modal__footer.is-center {
    justify-content: center;
  }

  @media (prefers-reduced-motion: no-preference) {
    .wf-modal {
      transform: translateY(4px);
      opacity: 0.98;
      transition:
        transform 0.16s ease,
        opacity 0.16s ease;
    }
    .wf-modal-overlay.is-open .wf-modal {
      transform: translateY(0);
      opacity: 1;
    }
  }

  /* Variants */
  /* Overlay alignment (top) */
  .wf-modal-overlay.is-top {
    align-items: flex-start;
    padding-top: var(--wf-space-6);
  }

  /* Scrollable body (long content) */
  .wf-modal--scroll .wf-modal__body {
    max-height: 80vh;
    max-height: 80dvh;
    overflow: auto;
  }

  /* Fullscreen modal */
  .wf-modal-fullscreen {
    width: 100vw;
    height: 100vh;
    height: 100dvh; /* モバイルのアドレスバー伸縮に追従 */
    max-width: none;
    max-height: none;
    border-radius: 0;
    border: 0;
  }
  .wf-modal-fullscreen .wf-modal__body {
    flex: 1 1 auto;
    overflow: auto;
  }

  /* Status variations */
  .wf-modal--danger .wf-modal__header {
    background: var(--wf-danger);
    color: var(--wf-danger-fg);
  }
  .wf-modal--danger .wf-modal__footer {
    border-top-color: var(--wf-danger-text);
  }

  .wf-modal--warning .wf-modal__header {
    background: var(--wf-warning);
    color: var(--wf-warning-fg);
  }
  .wf-modal--warning .wf-modal__footer {
    border-top-color: var(--wf-warning-text);
  }

  .wf-modal--success .wf-modal__header {
    background: var(--wf-success);
    color: var(--wf-success-fg);
  }
  .wf-modal--success .wf-modal__footer {
    border-top-color: var(--wf-success-text);
  }

  .wf-modal--info .wf-modal__header {
    background: var(--wf-color-accent);
    color: var(--wf-color-accent-fg);
  }
  .wf-modal--info .wf-modal__footer {
    border-top-color: var(--wf-color-accent);
  }

  /* モバイル対応: パディング改善 */
  @media (max-width: 600px) {
    .wf-modal,
    .wf-modal-sm,
    .wf-modal-lg {
      width: calc(100vw - var(--wf-space-4) * 2);
      margin: var(--wf-space-4);
    }
  }
}
/*!
 * @component Tooltip
 * @description Tooltip component.
 * @selector .wf-tooltip
 * @variants 
 * @variables --wf-color-text, --wf-surface-base, --wf-radius-sm, --wf-font-sm, --wf-arrow-x
 */
@layer components {
  /* Tooltip */
  .wf-tooltip {
    position: absolute;
    z-index: var(--wf-z-tooltip);
    background: var(--wf-color-text);
    color: var(--wf-surface-base);
    padding: 6px 8px;
    border-radius: var(--wf-radius-sm);
    font-size: var(--wf-font-sm);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    display: none;
  }
  .wf-tooltip.is-open {
    display: block;
  }
  .wf-tooltip.is-top {
    transform: translate(-50%, -8px);
  }
  .wf-tooltip.is-right {
    transform: translate(8px, -50%);
  }
  .wf-tooltip.is-bottom {
    transform: translate(-50%, 8px);
  }
  .wf-tooltip.is-left {
    transform: translate(-8px, -50%);
  }

  /* Arrow */
  .wf-tooltip::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border: 6px solid transparent;
  }
  /* 矢印は本体に接する側を塗り、先端を対象要素へ向ける */
  .wf-tooltip.is-top::after {
    border-top-color: var(--wf-color-text);
    border-bottom-color: transparent;
    top: 100%;
    left: calc(50% + var(--wf-arrow-x, 0px));
    transform: translateX(-50%);
  }
  .wf-tooltip.is-bottom::after {
    border-top-color: transparent;
    border-bottom-color: var(--wf-color-text);
    bottom: 100%;
    left: calc(50% + var(--wf-arrow-x, 0px));
    transform: translateX(-50%);
  }
  .wf-tooltip.is-left::after {
    border-left-color: var(--wf-color-text);
    border-right-color: transparent;
    left: 100%;
    top: calc(50% + var(--wf-arrow-y, 0px));
    transform: translateY(-50%);
  }
  .wf-tooltip.is-right::after {
    border-right-color: var(--wf-color-text);
    border-left-color: transparent;
    right: 100%;
    top: calc(50% + var(--wf-arrow-y, 0px));
    transform: translateY(-50%);
  }
}
/*!
 * @component Popover
 * @description Popover component.
 * @selector .wf-popover
 * @variants 
 * @variables --wf-surface-base, --wf-color-text, --wf-color-border, --wf-radius-md, --wf-space-3
 */
@layer components {
  /* Popover */
  .wf-popover {
    position: absolute;
    z-index: var(--wf-z-popover);
    background: var(--wf-surface-base);
    color: var(--wf-color-text);
    border: 1px solid var(--wf-color-border);
    border-radius: var(--wf-radius-md);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
    width: 260px;
    display: none;
  }
  .wf-popover.is-open {
    display: block;
  }
  .wf-popover__header {
    padding: var(--wf-space-3) var(--wf-space-4);
    border-bottom: 1px solid var(--wf-color-border);
    font-weight: 700;
  }
  .wf-popover__body {
    padding: var(--wf-space-4);
  }

  /*
   * Arrow: JS が付ける配置クラスに合わせて表示する（is-bottom = 対象の下に出る → 上辺に上向きの矢印）。
   * is-arrow-top / is-arrow-bottom は手動配置用の別名。::before が枠線色、::after が本体色。
   */
  .wf-popover:is(.is-bottom, .is-arrow-top)::before,
  .wf-popover:is(.is-bottom, .is-arrow-top)::after,
  .wf-popover:is(.is-top, .is-arrow-bottom)::before,
  .wf-popover:is(.is-top, .is-arrow-bottom)::after {
    content: "";
    position: absolute;
    left: calc(50% + var(--wf-arrow-x, 0px));
    width: 0;
    height: 0;
    border: 8px solid transparent;
    transform: translateX(-50%);
  }
  .wf-popover:is(.is-bottom, .is-arrow-top)::before {
    bottom: 100%;
    border-bottom-color: var(--wf-color-border);
  }
  .wf-popover:is(.is-bottom, .is-arrow-top)::after {
    bottom: calc(100% - 1px);
    border-bottom-color: var(--wf-surface-base);
  }
  .wf-popover:is(.is-top, .is-arrow-bottom)::before {
    top: 100%;
    border-top-color: var(--wf-color-border);
  }
  .wf-popover:is(.is-top, .is-arrow-bottom)::after {
    top: calc(100% - 1px);
    border-top-color: var(--wf-surface-base);
  }
}
/*!
 * @component Dropdown
 * @description Dropdown component.
 * @selector .wf-dropdown
 * @variants 
 * @variables --wf-color-border, --wf-surface-base, --wf-space-2, --wf-space-3, --wf-radius-md
 */
@layer components {
  /* Dropdown */
  .wf-dropdown {
    position: relative;
    display: inline-block;
  }
  .wf-dropdown__toggle {
    appearance: none;
    border: 1px solid var(--wf-color-border);
    background: var(--wf-surface-base);
    padding: var(--wf-space-2) var(--wf-space-3);
    border-radius: var(--wf-radius-md);
    cursor: pointer;
  }
  .wf-dropdown__menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 180px;
    background: var(--wf-surface-base);
    border: 1px solid var(--wf-color-border);
    border-radius: var(--wf-radius-md);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    padding: var(--wf-space-2) 0;
    display: none;
    z-index: var(--wf-z-dropdown);
  }
  .wf-dropdown.is-open .wf-dropdown__menu {
    display: block;
  }
  .wf-dropdown__item {
    display: block;
    padding: 8px 12px;
    color: var(--wf-color-text);
    text-decoration: none;
  }
  .wf-dropdown__item:hover,
  .wf-dropdown__item:focus-visible {
    background: var(--wf-surface-muted);
  }

  /* モバイル対応: 画面端はみ出し対策 */
  @media (max-width: 600px) {
    .wf-dropdown__menu {
      /* 画面幅の90%を超えないように */
      min-width: min(180px, 90vw);
      max-width: 90vw;

      /* 画面端ではみ出しを防ぐ（中央配置） */
      left: 50%;
      transform: translateX(-50%);
    }
  }
}
/*!
 * @component Navbar
 * @description Navbar component.
 * @selector .wf-navbar
 * @variants .wf-navbar-brand, .wf-navbar-nav, .wf-nav-item, .wf-nav-link, .wf-hamburger
 * @variables --wf-space-2, --wf-surface-base, --wf-color-border, --wf-space-4, --wf-color-text
 */
@layer components {
  /* Navbar */
  .wf-navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wf-space-2);
    background: var(--wf-surface-base);
    border-bottom: 1px solid var(--wf-color-border);
    padding: var(--wf-space-2) var(--wf-space-4);
  }
  .wf-navbar-brand {
    font-weight: 700;
    color: var(--wf-color-text);
    text-decoration: none;
  }
  .wf-navbar-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--wf-space-2);
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .wf-nav-item {
    display: block;
  }
  .wf-nav-link {
    display: inline-block;
    padding: var(--wf-space-2) var(--wf-space-3);
    border-radius: var(--wf-radius-md);
    color: var(--wf-color-text);
    text-decoration: none;
  }
  .wf-nav-link:hover,
  .wf-nav-link:focus-visible {
    background: var(--wf-surface-muted);
  }
  .wf-nav-link.is-active {
    color: var(--wf-color-accent);
    background: var(--wf-surface-subtle);
  }

  /* Hamburger Menu Icon */
  .wf-hamburger {
    display: none; /* デフォルトは非表示（モバイルで表示） */
    position: relative;
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 10;
  }

  .wf-hamburger__line {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--wf-color-text);
    transition: all 0.3s ease;
    transform-origin: center center;
  }

  .wf-hamburger__line:nth-child(1) {
    top: 4px;
  }

  .wf-hamburger__line:nth-child(2) {
    top: 11px;
  }

  .wf-hamburger__line:nth-child(3) {
    top: 18px;
  }

  /* アクティブ状態（×印） */
  .wf-hamburger.is-active .wf-hamburger__line:nth-child(1) {
    top: 11px;
    transform: rotate(45deg);
  }

  .wf-hamburger.is-active .wf-hamburger__line:nth-child(2) {
    opacity: 0;
  }

  .wf-hamburger.is-active .wf-hamburger__line:nth-child(3) {
    top: 11px;
    transform: rotate(-45deg);
  }

  /* Reduced motion対応 */
  @media (prefers-reduced-motion: reduce) {
    .wf-hamburger__line {
      transition: none;
    }
  }

  /* Navbar variant: Primary (テーマカラー対応) */
  .wf-navbar-primary {
    background: var(--wf-primary-bg);
    border-bottom-color: transparent;
  }
  .wf-navbar-primary .wf-navbar-brand {
    color: var(--wf-primary-fg);
  }
  .wf-navbar-primary .wf-nav-link {
    color: var(--wf-primary-fg);
  }
  /* 背景は primary-fg との組み合わせを検証済みの hover / active 色を使う */
  .wf-navbar-primary .wf-nav-link:hover,
  .wf-navbar-primary .wf-nav-link:focus-visible {
    background: var(--wf-primary-bg-hover);
  }
  .wf-navbar-primary .wf-nav-link.is-active {
    background: var(--wf-primary-bg-active);
    box-shadow: inset 0 -2px 0 var(--wf-primary-fg);
  }
  .wf-navbar-primary .wf-nav-link:focus-visible {
    outline-color: var(--wf-primary-fg);
  }
  .wf-navbar-primary .wf-hamburger__line {
    background-color: var(--wf-primary-fg);
  }

  /* モバイル対応: デフォルト（ハンバーガーなし） */
  @media (max-width: 768px) {
    /* ナビバーを縦並びに */
    .wf-navbar {
      flex-direction: column;
      align-items: stretch;
    }

    /* ナビゲーションリストも縦並びに */
    .wf-navbar-nav {
      flex-direction: column;
      width: 100%;
    }

    /* ナビゲーション項目をフル幅に */
    .wf-nav-item {
      width: 100%;
    }

    /* リンクをブロック表示 */
    .wf-nav-link {
      display: block;
      width: 100%;
    }

    /* ハンバーガーメニューがある場合の上書き */
    .wf-hamburger {
      display: flex;
      align-self: flex-end;
      position: absolute;
      top: var(--wf-space-2);
      right: var(--wf-space-4);
    }

    /* ハンバーガーがある場合はサイドドロワーに */
    .wf-navbar:has(.wf-hamburger) {
      flex-direction: row;
      align-items: center;
    }

    .wf-navbar:has(.wf-hamburger) .wf-navbar-nav {
      position: fixed;
      top: 0;
      left: 0;
      width: 280px;
      height: 100vh;
      height: 100dvh;
      background: var(--wf-surface-base);
      flex-direction: column;
      align-items: flex-start;
      padding: var(--wf-space-6);
      box-shadow: var(--wf-shadow-lg);
      /* 閉じている間は画面外へ移動し、visibility でキーボード操作の対象からも外す */
      transform: translateX(calc(-100% - 24px));
      visibility: hidden;
      transition:
        transform 0.3s ease,
        visibility 0s linear 0.3s;
      z-index: var(--wf-z-drawer);
    }

    .wf-navbar:has(.wf-hamburger) .wf-navbar-nav.is-open {
      transform: none;
      visibility: visible;
      transition:
        transform 0.3s ease,
        visibility 0s;
    }

    .wf-navbar:has(.wf-hamburger) .wf-nav-link {
      padding: var(--wf-space-3) var(--wf-space-4);
    }

    /* Primary variant - モバイル時のサイドドロワー背景色 */
    .wf-navbar-primary:has(.wf-hamburger) .wf-navbar-nav {
      background: var(--wf-primary-bg);
    }
  }
}
/*!
 * @component Breadcrumb
 * @description Breadcrumb component.
 * @selector .wf-breadcrumb
 * @variants .wf-breadcrumb-item
 * @variables --wf-space-2, --wf-color-muted, --wf-link-color, --wf-link-color-hover, --wf-space-1
 */
@layer components {
  /* Breadcrumb */
  .wf-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wf-space-2);
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .wf-breadcrumb-item {
    color: var(--wf-color-muted);
  }
  .wf-breadcrumb-item a {
    color: var(--wf-link-color);
    text-decoration: none;
    border-bottom: 1px solid transparent;
  }
  .wf-breadcrumb-item a:hover {
    color: var(--wf-link-color-hover);
    border-bottom-color: currentColor;
  }
  .wf-breadcrumb-item + .wf-breadcrumb-item::before {
    content: "/";
    margin: 0 var(--wf-space-1);
    color: var(--wf-color-muted);
  }
}
/*!
 * @component Pagination
 * @description Pagination component.
 * @selector .wf-pagination
 * @variants .wf-page-link
 * @variables --wf-space-2, --wf-color-border, --wf-radius-md, --wf-color-text, --wf-surface-muted
 */
@layer components {
  /* Pagination */
  .wf-pagination {
    display: flex;
    align-items: center;
    gap: var(--wf-space-2);
    flex-wrap: wrap; /* 折り返し対応 */
    justify-content: center; /* 中央揃え */
  }
  .wf-page-link {
    display: inline-block;
    padding: 6px 10px;
    border: 1px solid var(--wf-color-border);
    border-radius: var(--wf-radius-md);
    color: var(--wf-color-text);
    text-decoration: none;
  }
  .wf-page-link:hover,
  .wf-page-link:focus-visible {
    background: var(--wf-surface-muted);
  }
  .wf-page-link.is-active {
    background: var(--wf-primary-bg);
    color: var(--wf-primary-fg);
    /* 淡いテーマ色の塗りでも選択状態が分かるよう、枠線は文字用のアクセント色にする */
    border-color: var(--wf-color-accent);
    font-weight: 700;
  }
  .wf-page-link.is-disabled {
    opacity: 0.5;
    pointer-events: none;
  }

  /* モバイル対応 */
  @media (max-width: 600px) {
    .wf-pagination {
      gap: var(--wf-space-1); /* モバイルでギャップを縮小 */
    }

    .wf-page-link {
      padding: var(--wf-space-2) var(--wf-space-2);
      min-width: 36px; /* タップターゲット確保 */
      text-align: center;
    }
  }
}
/*!
 * @component Tabs
 * @description Tabs component.
 * @selector .wf-tabs
 * @variants .wf-tablist, .wf-tab, .wf-tabpanels, .wf-tabpanel
 * @variables --wf-space-2, --wf-color-border, --wf-space-3, --wf-color-muted, --wf-color-text
 */
@layer components {
  /* Tabs */
  .wf-tabs {
    width: 100%;
  }
  .wf-tablist {
    display: flex;
    gap: var(--wf-space-2);
    border-bottom: 1px solid var(--wf-color-border);
  }
  .wf-tab {
    appearance: none;
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: var(--wf-space-2) var(--wf-space-3);
    color: var(--wf-color-muted);
    border-bottom: 2px solid transparent;
    font-weight: 600;
  }
  .wf-tab:hover,
  .wf-tab:focus-visible {
    color: var(--wf-color-text);
  }
  .wf-tab.is-active,
  .wf-tab[aria-selected="true"] {
    color: var(--wf-color-accent);
    border-bottom-color: var(--wf-color-accent);
  }

  .wf-tabpanels {
    padding-top: var(--wf-space-4);
  }
  .wf-tabpanel {
    display: none;
  }
  .wf-tabpanel.is-active,
  .wf-tabpanel[aria-hidden="false"] {
    display: block;
  }

  /* モバイル対応: 横スクロール */
  @media (max-width: 600px) {
    .wf-tablist {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
    }

    /* スクロールバーを薄く */
    .wf-tablist::-webkit-scrollbar {
      height: 4px;
    }

    .wf-tablist::-webkit-scrollbar-thumb {
      background: var(--wf-color-border);
      border-radius: 2px;
    }
  }
}
/*!
 * @component Accordion
 * @description Accordion component.
 * @selector .wf-accordion
 * @variants 
 * @variables --wf-color-border, --wf-radius-md, --wf-surface-base, --wf-space-3, --wf-space-4
 */
@layer components {
  /* Accordion */
  .wf-accordion {
    border: 1px solid var(--wf-color-border);
    border-radius: var(--wf-radius-md);
    background: var(--wf-surface-base);
  }
  .wf-accordion__item + .wf-accordion__item {
    border-top: 1px solid var(--wf-color-border);
  }
  .wf-accordion__header {
    width: 100%;
    text-align: left;
    padding: var(--wf-space-3) var(--wf-space-4);
    background: transparent;
    border: 0;
    cursor: pointer;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  /* ネイティブの <details> / <summary> でも同じ見た目で使える */
  summary.wf-accordion__header {
    list-style: none;
  }
  summary.wf-accordion__header::-webkit-details-marker {
    display: none;
  }
  /* 開閉の矢印。文字ではなく線で描き、回転で状態を表す（読み上げ対象にならない） */
  .wf-accordion__header::after {
    content: "";
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    margin-left: var(--wf-space-3);
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    color: var(--wf-color-muted);
    translate: 0 -2px;
    rotate: 45deg;
    transition:
      rotate calc(var(--wf-enable-motion, 1) * 0.2s) ease,
      translate calc(var(--wf-enable-motion, 1) * 0.2s) ease,
      color 0.2s ease;
  }
  .wf-accordion__header[aria-expanded="true"]::after,
  details[open] > .wf-accordion__header::after {
    color: var(--wf-color-text);
    translate: 0 2px;
    rotate: 225deg;
  }
  .wf-accordion__header:hover,
  .wf-accordion__header:focus-visible {
    background: var(--wf-surface-muted);
  }
  .wf-accordion__panel {
    padding: var(--wf-space-4);
  }
}
/*!
 * @component Offcanvas
 * @description Offcanvas component.
 * @selector .wf-offcanvas-overlay
 * @variants .wf-offcanvas, .wf-offcanvas-start, .wf-offcanvas-end, .wf-offcanvas-top, .wf-offcanvas-bottom
 * @variables --wf-surface-base, --wf-color-text, --wf-color-border, --wf-space-2, --wf-space-3
 */
@layer components {
  /* Offcanvas */
  .wf-offcanvas-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: none;
  }
  .wf-offcanvas-overlay.is-open {
    display: block;
  }
  .wf-offcanvas {
    position: fixed;
    background: var(--wf-surface-base);
    color: var(--wf-color-text);
    border: 1px solid var(--wf-color-border);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
    display: none;
  }
  .wf-offcanvas.is-open {
    display: block;
  }
  .wf-offcanvas-start {
    left: 0;
    top: 0;
    bottom: 0;
    width: min(92vw, 320px);
  }
  .wf-offcanvas-end {
    right: 0;
    top: 0;
    bottom: 0;
    width: min(92vw, 320px);
  }
  .wf-offcanvas-top {
    left: 0;
    right: 0;
    top: 0;
    height: min(60vh, 420px);
  }
  .wf-offcanvas-bottom {
    left: 0;
    right: 0;
    bottom: 0;
    height: min(60vh, 420px);
  }
  .wf-offcanvas__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wf-space-2);
    padding: var(--wf-space-3) var(--wf-space-4);
    border-bottom: 1px solid var(--wf-color-border);
  }
  .wf-offcanvas__body {
    padding: var(--wf-space-4);
  }
}
/*!
 * @component Grid
 * @description Grid component.
 * @selector .wf-row
 * @variants .wf-g-0, .wf-g-1, .wf-g-2, .wf-g-3, .wf-g-4
 * @variables --wf-gx, --wf-gy, --wf-space-1, --wf-space-2, --wf-space-3
 */
@layer components {
  /* Grid System (12 columns, flex-based) */
  .wf-row {
    display: flex;
    flex-wrap: wrap;
    --wf-gx: 0px;
    --wf-gy: 0px;
    margin-left: calc(-1 * var(--wf-gx));
    margin-right: calc(-1 * var(--wf-gx));
    row-gap: var(--wf-gy);
  }

  /* Gutters */
  .wf-g-0 {
    --wf-gx: 0px;
    --wf-gy: 0px;
  }
  .wf-g-1 {
    --wf-gx: var(--wf-space-1);
    --wf-gy: var(--wf-space-1);
  }
  .wf-g-2 {
    --wf-gx: var(--wf-space-2);
    --wf-gy: var(--wf-space-2);
  }
  .wf-g-3 {
    --wf-gx: var(--wf-space-3);
    --wf-gy: var(--wf-space-3);
  }
  .wf-g-4 {
    --wf-gx: var(--wf-space-4);
    --wf-gy: var(--wf-space-4);
  }
  .wf-g-5 {
    --wf-gx: var(--wf-space-6);
    --wf-gy: var(--wf-space-6);
  }

  /* Columns - モバイルファースト: デフォルトは100%幅 */
  [class^="wf-col-"],
  [class*=" wf-col-"] {
    padding-left: var(--wf-gx);
    padding-right: var(--wf-gx);
    flex: 0 0 auto;
    width: 100%; /* モバイルデフォルト */
  }

  /* sm以上（600px以上）でグリッド幅を適用 */
  @media (min-width: 600px) {
    .wf-col-1 {
      width: 8.333333%;
    }
    .wf-col-2 {
      width: 16.666667%;
    }
    .wf-col-3 {
      width: 25%;
    }
    .wf-col-4 {
      width: 33.333333%;
    }
    .wf-col-5 {
      width: 41.666667%;
    }
    .wf-col-6 {
      width: 50%;
    }
    .wf-col-7 {
      width: 58.333333%;
    }
    .wf-col-8 {
      width: 66.666667%;
    }
    .wf-col-9 {
      width: 75%;
    }
    .wf-col-10 {
      width: 83.333333%;
    }
    .wf-col-11 {
      width: 91.666667%;
    }
    .wf-col-12 {
      width: 100%;
    }
  }

  /* Row alignment variants */
  .wf-row-stretch {
    align-items: stretch;
  }
  .wf-row-start {
    align-items: flex-start;
  }
  .wf-row-center {
    align-items: center;
  }
  .wf-row-end {
    align-items: flex-end;
  }

  /* Full-height column */
  .wf-col-fill {
    align-self: stretch;
    min-height: 0;
  }

  /* Auto layout (equal flexible columns) */
  .wf-col-auto {
    flex: 1 1 0;
    width: auto;
  }

  /* Offsets - モバイルでは無効、sm以上で有効 */
  @media (min-width: 600px) {
    .wf-offset-1 {
      margin-left: 8.333333%;
    }
    .wf-offset-2 {
      margin-left: 16.666667%;
    }
    .wf-offset-3 {
      margin-left: 25%;
    }
    .wf-offset-4 {
      margin-left: 33.333333%;
    }
  }

  /* Breakpoint: sm */
  @media (min-width: 600px) {
    .wf-col-sm-1 {
      flex: 0 0 auto;
      width: 8.333333%;
    }
    .wf-col-sm-2 {
      flex: 0 0 auto;
      width: 16.666667%;
    }
    .wf-col-sm-3 {
      flex: 0 0 auto;
      width: 25%;
    }
    .wf-col-sm-4 {
      flex: 0 0 auto;
      width: 33.333333%;
    }
    .wf-col-sm-5 {
      flex: 0 0 auto;
      width: 41.666667%;
    }
    .wf-col-sm-6 {
      flex: 0 0 auto;
      width: 50%;
    }
    .wf-col-sm-7 {
      flex: 0 0 auto;
      width: 58.333333%;
    }
    .wf-col-sm-8 {
      flex: 0 0 auto;
      width: 66.666667%;
    }
    .wf-col-sm-9 {
      flex: 0 0 auto;
      width: 75%;
    }
    .wf-col-sm-10 {
      flex: 0 0 auto;
      width: 83.333333%;
    }
    .wf-col-sm-11 {
      flex: 0 0 auto;
      width: 91.666667%;
    }
    .wf-col-sm-12 {
      flex: 0 0 auto;
      width: 100%;
    }
    .wf-col-sm-auto {
      flex: 1 1 0;
      width: auto;
    }
    .wf-offset-sm-1 {
      margin-left: 8.333333%;
    }
    .wf-offset-sm-2 {
      margin-left: 16.666667%;
    }
    .wf-offset-sm-3 {
      margin-left: 25%;
    }
    .wf-offset-sm-4 {
      margin-left: 33.333333%;
    }
  }

  /* Breakpoint: md */
  @media (min-width: 900px) {
    .wf-col-md-1 {
      flex: 0 0 auto;
      width: 8.333333%;
    }
    .wf-col-md-2 {
      flex: 0 0 auto;
      width: 16.666667%;
    }
    .wf-col-md-3 {
      flex: 0 0 auto;
      width: 25%;
    }
    .wf-col-md-4 {
      flex: 0 0 auto;
      width: 33.333333%;
    }
    .wf-col-md-5 {
      flex: 0 0 auto;
      width: 41.666667%;
    }
    .wf-col-md-6 {
      flex: 0 0 auto;
      width: 50%;
    }
    .wf-col-md-7 {
      flex: 0 0 auto;
      width: 58.333333%;
    }
    .wf-col-md-8 {
      flex: 0 0 auto;
      width: 66.666667%;
    }
    .wf-col-md-9 {
      flex: 0 0 auto;
      width: 75%;
    }
    .wf-col-md-10 {
      flex: 0 0 auto;
      width: 83.333333%;
    }
    .wf-col-md-11 {
      flex: 0 0 auto;
      width: 91.666667%;
    }
    .wf-col-md-12 {
      flex: 0 0 auto;
      width: 100%;
    }
    .wf-col-md-auto {
      flex: 1 1 0;
      width: auto;
    }
    .wf-offset-md-1 {
      margin-left: 8.333333%;
    }
    .wf-offset-md-2 {
      margin-left: 16.666667%;
    }
    .wf-offset-md-3 {
      margin-left: 25%;
    }
    .wf-offset-md-4 {
      margin-left: 33.333333%;
    }
  }
}
/*!
 * @component Progress
 * @description Progress component.
 * @selector .wf-progress
 * @variants .wf-progress-sm, .wf-progress-lg, .wf-progress-success, .wf-progress-warning, .wf-progress-danger
 * @variables --wf-surface-muted, --wf-color-border, --wf-radius-md, --wf-color-accent, --wf-success
 */
@layer components {
  /* Progress */
  .wf-progress {
    width: 100%;
    background: var(--wf-surface-muted);
    border: 1px solid var(--wf-color-border);
    border-radius: var(--wf-radius-md);
    overflow: hidden;
    height: 12px;
  }
  .wf-progress__bar {
    height: 100%;
    background: var(--wf-color-accent);
    width: 0;
    transition: width 0.2s ease;
  }
  .wf-progress-sm {
    height: 8px;
  }
  .wf-progress-lg {
    height: 16px;
  }
  .wf-progress-success .wf-progress__bar {
    background: var(--wf-success-text);
  }
  .wf-progress-warning .wf-progress__bar {
    background: var(--wf-warning-text);
  }
  .wf-progress-danger .wf-progress__bar {
    background: var(--wf-danger-text);
  }
}
/*!
 * @component Spinner
 * @description Spinner component.
 * @selector .wf-spinner
 * @variants .wf-spinner-sm, .wf-spinner-success, .wf-spinner-warning, .wf-spinner-danger, .wf-spinner-lg
 * @variables --wf-color-border, --wf-color-accent, --wf-success, --wf-warning, --wf-danger
 */
@layer components {
  /* Spinner */
  .wf-spinner {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    /* トラックは文字色を薄めた色（装飾用の枠線色は背景とほぼ同色で見えないため）。インジケーターはアクセント色 */
    border: 2px solid color-mix(in srgb, var(--wf-color-text) 18%, transparent);
    border-top-color: var(--wf-color-accent);
    animation-name: wf-spin;
    animation-duration: calc(var(--wf-enable-motion, 1) * 0.8s);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    display: inline-block;
  }
  .wf-spinner-sm {
    width: 16px;
    height: 16px;
  }
  /* Status variants */
  .wf-spinner-success {
    border-top-color: var(--wf-success-text);
  }
  .wf-spinner-warning {
    border-top-color: var(--wf-warning-text);
  }
  .wf-spinner-danger {
    border-top-color: var(--wf-danger-text);
  }
  .wf-spinner-lg {
    width: 28px;
    height: 28px;
  }
  @keyframes wf-spin {
    to {
      transform: rotate(360deg);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .wf-spinner {
      animation: none;
    }
  }
}
/*!
 * @component List Group
 * @description List Group component.
 * @selector .wf-list-group
 * @variants .wf-list-item, .wf-meta, .wf-icon
 * @variables --wf-color-border, --wf-radius-md, --wf-surface-base, --wf-space-3, --wf-space-4
 */
@layer components {
  /* List Group */
  .wf-list-group {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--wf-color-border);
    border-radius: var(--wf-radius-md);
    background: var(--wf-surface-base);
    overflow: hidden;
  }
  .wf-list-item {
    display: flex;
    align-items: center;
    gap: var(--wf-space-3);
    padding: var(--wf-space-3) var(--wf-space-4);
    border-bottom: 1px solid var(--wf-color-border);
    color: var(--wf-color-text);
    text-decoration: none;
    width: 100%;
    background: transparent;
  }
  .wf-list-item:last-child {
    border-bottom: 0;
  }
  .wf-list-item:hover,
  .wf-list-item:focus-visible {
    background: var(--wf-surface-muted);
  }
  .wf-list-item.is-active {
    background: var(--wf-surface-subtle);
    color: var(--wf-color-accent);
  }
  .wf-list-item .wf-meta {
    margin-left: auto;
    color: var(--wf-color-muted);
    font-size: var(--wf-font-sm);
  }

  /* Ensure buttons look like list items */
  button.wf-list-item {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
  }
  a.wf-list-item {
    display: flex;
  }

  /* Disabled state */
  .wf-list-item.is-disabled,
  .wf-list-item[aria-disabled="true"],
  .wf-list-item:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
  }

  /* Optional icon size inside items */
  .wf-list-item .wf-icon {
    width: var(--wf-icon-md);
    height: var(--wf-icon-md);
    line-height: 1;
    flex: 0 0 auto;
  }
}
/*!
 * @component Toast
 * @description Toast component.
 * @selector .wf-toast
 * @variants .wf-toast--success, .wf-toast--warning, .wf-toast--danger, .wf-toast-container, .wf-toast-container--top-right
 * @variables --wf-space-3, --wf-space-4, --wf-surface-base, --wf-color-border, --wf-color-accent
 */
@layer components {
  /* Toast - Lightweight notification component */
  .wf-toast {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--wf-space-3);
    padding: var(--wf-space-3) var(--wf-space-4);
    background: var(--wf-surface-base);
    border: 1px solid var(--wf-color-border);
    border-left: 3px solid var(--wf-color-accent);
    border-radius: var(--wf-radius-md);
    box-shadow: var(--wf-shadow-md);
    min-width: 280px;
    max-width: 480px;
  }

  .wf-toast__content {
    flex: 1;
    font-size: var(--wf-font-sm);
    line-height: var(--wf-leading-normal);
    color: var(--wf-color-text);
  }

  .wf-toast__title {
    font-weight: 700;
    margin-bottom: var(--wf-space-1);
    color: var(--wf-color-text);
  }

  .wf-toast__close {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--wf-color-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--wf-radius-sm);
    transition: color var(--wf-duration-fast) var(--wf-ease-out);
  }

  .wf-toast__close:hover {
    color: var(--wf-color-text);
    background: var(--wf-surface-muted);
  }

  .wf-toast__close:focus-visible {
    outline: 2px solid var(--wf-focus);
    outline-offset: 2px;
  }

  /* Toast variants */
  .wf-toast--success {
    border-left-color: var(--wf-success-text);
    background: var(--wf-surface-base);
  }

  .wf-toast--success .wf-toast__title {
    color: var(--wf-success-text);
  }

  .wf-toast--warning {
    border-left-color: var(--wf-warning-text);
    background: var(--wf-surface-base);
  }

  .wf-toast--warning .wf-toast__title {
    color: var(--wf-warning-text);
  }

  .wf-toast--danger {
    border-left-color: var(--wf-danger-text);
    background: var(--wf-surface-base);
  }

  .wf-toast--danger .wf-toast__title {
    color: var(--wf-danger-text);
  }

  /* Toast container (for positioning multiple toasts) */
  .wf-toast-container {
    position: fixed;
    z-index: var(--wf-z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--wf-space-3);
    padding: var(--wf-space-4);
    pointer-events: none;
  }

  .wf-toast-container .wf-toast {
    pointer-events: auto;
    animation-name: wf-toast-in;
    animation-duration: calc(var(--wf-enable-motion, 1) * var(--wf-duration-base));
    animation-timing-function: var(--wf-ease-out);
  }

  /* Container positions */
  .wf-toast-container--top-right {
    top: 0;
    right: 0;
  }

  .wf-toast-container--top-left {
    top: 0;
    left: 0;
  }

  .wf-toast-container--bottom-right {
    bottom: 0;
    right: 0;
  }

  .wf-toast-container--bottom-left {
    bottom: 0;
    left: 0;
  }

  .wf-toast-container--top-center {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }

  .wf-toast-container--bottom-center {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }

  /* Animations */
  @keyframes wf-toast-in {
    from {
      opacity: 0;
      transform: translateY(-8px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .wf-toast.is-removing {
    animation-name: wf-toast-out;
    animation-duration: calc(var(--wf-enable-motion, 1) * var(--wf-duration-base));
    animation-timing-function: var(--wf-ease-in);
    animation-fill-mode: forwards;
  }

  @keyframes wf-toast-out {
    from {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    to {
      opacity: 0;
      transform: translateY(-8px) scale(0.95);
    }
  }

  /* Reduced motion support */
  @media (prefers-reduced-motion: reduce) {
    .wf-toast-container .wf-toast {
      animation: none;
    }

    .wf-toast.is-removing {
      animation: none;
      opacity: 0;
    }
  }

  /* Mobile responsive */
  @media (max-width: 600px) {
    .wf-toast {
      min-width: 0;
      max-width: 100%;
    }

    .wf-toast-container {
      left: var(--wf-space-2);
      right: var(--wf-space-2);
      padding: var(--wf-space-2);
    }

    .wf-toast-container--top-center,
    .wf-toast-container--bottom-center {
      left: var(--wf-space-2);
      right: var(--wf-space-2);
      transform: none;
    }
  }
}
/*!
 * @component Message
 * @description Message component.
 * @selector .wf-message
 * @variants .wf-message-sent, .wf-message-system, .wf-icon, .wf-message-compact
 * @variables --wf-space-3, --wf-space-4, --wf-color-border, --wf-color-muted, --wf-font-sm
 */
/**
 * Chat/Message Component
 * チャット風メッセージ表示コンポーネント
 */

@layer components {
  /* Message Container */
  .wf-message {
    display: flex;
    gap: var(--wf-space-3);
    margin-bottom: var(--wf-space-4);
    max-width: 100%;
  }

  /* Message Avatar */
  .wf-message__avatar {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background-color: var(--wf-color-accent-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wf-color-text);
    font-weight: 600;
    font-size: var(--wf-font-sm);
  }

  .wf-message__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Message Content */
  .wf-message__content {
    flex: 1;
    min-width: 0;
    max-width: 70%;
  }

  /* Message Header */
  .wf-message__header {
    display: flex;
    align-items: center;
    gap: var(--wf-space-2);
    margin-bottom: var(--wf-space-1);
  }

  .wf-message__name {
    font-weight: 600;
    color: var(--wf-color-text);
    font-size: var(--wf-font-sm);
  }

  .wf-message__time {
    font-size: var(--wf-font-sm);
    color: var(--wf-color-muted);
  }

  /* Message Bubble */
  .wf-message__bubble {
    background-color: var(--wf-surface-base);
    border: 1px solid var(--wf-color-border);
    border-radius: 12px;
    padding: var(--wf-space-3);
    word-wrap: break-word;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  }

  /* Message Body */
  .wf-message__body {
    color: var(--wf-color-text);
    line-height: 1.5;
    font-size: var(--wf-font-md);
  }

  /* Message Footer (for reactions, etc.) */
  .wf-message__footer {
    margin-top: var(--wf-space-2);
    font-size: var(--wf-font-sm);
    color: var(--wf-color-muted);
  }

  /* Sent Message (Right Aligned) */
  .wf-message-sent {
    flex-direction: row-reverse;
  }

  .wf-message-sent .wf-message__content {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  .wf-message-sent .wf-message__header {
    flex-direction: row-reverse;
  }

  .wf-message-sent .wf-message__bubble {
    background-color: var(--wf-primary-bg);
    border-color: var(--wf-primary-bg-hover);
    color: var(--wf-primary-fg);
  }

  .wf-message-sent .wf-message__body {
    color: var(--wf-primary-fg);
  }

  /* System Message (Centered) */
  .wf-message-system {
    justify-content: center;
    margin: var(--wf-space-3) 0;
  }

  .wf-message-system .wf-message__avatar {
    display: none;
  }

  .wf-message-system .wf-message__content {
    max-width: none;
    text-align: center;
  }

  .wf-message-system .wf-message__bubble {
    background-color: var(--wf-surface-muted);
    border-color: var(--wf-color-border);
    display: inline-block;
    font-size: var(--wf-font-sm);
    color: var(--wf-color-muted);
  }

  /* Message Status Indicators */
  .wf-message__status {
    font-size: var(--wf-font-sm);
    color: var(--wf-color-muted);
    margin-top: var(--wf-space-1);
  }

  .wf-message__status .wf-icon {
    font-size: 12px;
  }

  .wf-message.is-read .wf-message__status {
    color: var(--wf-color-accent);
  }

  .wf-message.is-sending .wf-message__bubble {
    opacity: 0.6;
  }

  /* Compact Variant (No Avatar) */
  .wf-message-compact .wf-message__avatar {
    display: none;
  }

  .wf-message-compact {
    margin-bottom: var(--wf-space-2);
  }

  /* Responsive */
  @media (max-width: 600px) {
    .wf-message__content {
      max-width: 85%;
    }

    .wf-message__avatar {
      width: 32px;
      height: 32px;
    }

    .wf-message__bubble {
      padding: var(--wf-space-2);
    }
  }

  /* Accessibility */
  @media (prefers-reduced-motion: reduce) {
    .wf-message {
      transition: none;
    }
  }
}
/*!
 * @component Calendar
 * @description Calendar component.
 * @selector .wf-calendar
 * @variants .wf-calendar-fluid
 * @variables --wf-surface-base, --wf-radius-md, --wf-shadow-md, --wf-space-4, --wf-breakpoint-md
 */
@layer components {
  /* Calendar Component */
  .wf-calendar {
    background: var(--wf-surface-base);
    border-radius: var(--wf-radius-md);
    box-shadow: var(--wf-shadow-md);
    padding: var(--wf-space-4);
    width: 100%;
    max-width: 400px;
  }

  /* Fluid variant for container-fit layouts */
  .wf-calendar-fluid {
    width: 100%;
    max-width: 100%;
  }

  @media (min-width: 900px) {
    .wf-calendar {
      padding: var(--wf-space-6);
    }
  }

  .wf-calendar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--wf-space-4);
  }

  .wf-calendar__nav-btn {
    padding: var(--wf-space-2);
    background: var(--wf-surface-muted);
    border: none;
    border-radius: var(--wf-radius-md);
    cursor: pointer;
    transition: background-color var(--wf-duration-fast) ease;
    color: var(--wf-color-text);
    font-size: var(--wf-font-lg);
    line-height: 1;
    min-width: 32px;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .wf-calendar__nav-btn:hover {
    background: var(--wf-color-accent-muted);
    color: var(--wf-color-accent);
  }

  .wf-calendar__nav-btn:focus {
    outline: 2px solid var(--wf-focus);
    outline-offset: 2px;
  }

  .wf-calendar__title {
    font-size: var(--wf-font-lg);
    font-weight: 700;
    color: var(--wf-color-accent);
    text-align: center;
    flex: 1;
  }

  @media (min-width: 900px) {
    .wf-calendar__title {
      font-size: var(--wf-font-xl);
    }
  }

  .wf-calendar__weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--wf-space-half);
    margin-bottom: var(--wf-space-2);
  }

  .wf-calendar__weekday {
    text-align: center;
    font-size: var(--wf-font-sm);
    font-weight: 600;
    color: var(--wf-color-muted);
    padding: var(--wf-space-1);
  }

  .wf-calendar__weekday--weekend {
    color: var(--wf-color-accent);
  }

  .wf-calendar__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--wf-space-half);
  }

  .wf-calendar__day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--wf-color-border);
    border-radius: var(--wf-radius-sm);
    background: var(--wf-surface-base);
    color: var(--wf-color-text);
    cursor: pointer;
    transition: all var(--wf-duration-fast) ease;
    font-size: var(--wf-font-sm);
    font-weight: 500;
    position: relative;
    min-height: 36px;
  }

  @media (min-width: 900px) {
    .wf-calendar__day {
      font-size: var(--wf-font-md);
      min-height: 40px;
    }
  }

  .wf-calendar__day:hover:not(.is-disabled) {
    background: var(--wf-color-accent-subtle);
    border-color: var(--wf-color-accent);
    color: var(--wf-color-accent);
  }

  .wf-calendar__day.is-today {
    background: var(--wf-color-accent-muted);
    border-color: var(--wf-color-accent);
    color: var(--wf-color-accent);
    font-weight: 700;
  }

  .wf-calendar__day.is-today::before {
    content: "";
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background: var(--wf-color-accent);
    border-radius: 50%;
  }

  .wf-calendar__day.is-selected {
    background: var(--wf-primary-bg);
    color: var(--wf-primary-fg);
    border-color: var(--wf-color-accent);
    box-shadow: var(--wf-shadow-sm);
    font-weight: 700;
  }

  .wf-calendar__day.is-selected:hover {
    background: var(--wf-primary-bg-hover);
    border-color: var(--wf-color-accent);
  }

  .wf-calendar__day.is-disabled {
    background: var(--wf-disabled-bg);
    color: var(--wf-disabled-fg);
    cursor: not-allowed;
    opacity: 0.5;
  }

  .wf-calendar__day.is-disabled:hover {
    background: var(--wf-disabled-bg);
    border-color: var(--wf-color-border);
    color: var(--wf-disabled-fg);
  }

  .wf-calendar__day.is-other-month {
    color: var(--wf-color-muted);
    background: var(--wf-surface-subtle);
  }

  .wf-calendar__day:focus {
    outline: 2px solid var(--wf-focus);
    outline-offset: 2px;
    z-index: 1;
  }

  /* Range selection styles */
  .wf-calendar__day.is-range-start {
    background: var(--wf-primary-bg);
    color: var(--wf-primary-fg);
    border-color: var(--wf-color-accent);
    border-top-left-radius: var(--wf-radius-md);
    border-bottom-left-radius: var(--wf-radius-md);
  }

  .wf-calendar__day.is-range-end {
    background: var(--wf-primary-bg);
    color: var(--wf-primary-fg);
    border-color: var(--wf-color-accent);
    border-top-right-radius: var(--wf-radius-md);
    border-bottom-right-radius: var(--wf-radius-md);
  }

  .wf-calendar__day.is-in-range {
    background: var(--wf-color-accent-subtle);
    border-color: var(--wf-color-accent-muted);
  }

  .wf-calendar__day.is-in-range:hover {
    background: var(--wf-color-accent-muted);
  }
}
/*!
 * @component Schedule
 * @description Schedule component.
 * @selector .wf-schedule
 * @variants 
 * @variables --wf-space-2, --wf-space-6, --wf-space-3, --wf-color-border, --wf-radius-md
 */
@layer components {
  /* Schedule Component */
  .wf-schedule {
    width: 100%;
  }

  /* Mode Selection */
  .wf-schedule__mode-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--wf-space-2);
    margin-bottom: var(--wf-space-6);
  }

  @media (min-width: 640px) {
    .wf-schedule__mode-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  .wf-schedule__mode-button {
    padding: var(--wf-space-3);
    border: 2px solid var(--wf-color-border);
    border-radius: var(--wf-radius-md);
    background: var(--wf-surface-base);
    color: var(--wf-color-text);
    cursor: pointer;
    transition: all var(--wf-duration-base) var(--wf-ease-in-out);
    text-align: left;
  }

  @media (min-width: 768px) {
    .wf-schedule__mode-button {
      padding: var(--wf-space-4);
    }
  }

  .wf-schedule__mode-button:hover {
    background: var(--wf-surface-subtle);
    border-color: var(--wf-color-accent);
  }

  .wf-schedule__mode-button.is-active {
    border-color: var(--wf-color-accent);
    background: var(--wf-surface-subtle);
    color: var(--wf-color-accent);
  }

  .wf-schedule__mode-title {
    font-size: var(--wf-font-md);
    font-weight: 600;
    margin-bottom: var(--wf-space-1);
  }

  @media (min-width: 768px) {
    .wf-schedule__mode-title {
      font-size: var(--wf-font-lg);
    }
  }

  .wf-schedule__mode-desc {
    font-size: var(--wf-font-sm);
    opacity: 0.8;
    color: var(--wf-color-muted);
  }

  /* Settings Grid */
  .wf-schedule__settings {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--wf-space-3);
    margin-bottom: var(--wf-space-4);
    max-width: 600px;
  }

  @media (min-width: 768px) {
    .wf-schedule__settings {
      gap: var(--wf-space-4);
      margin-bottom: var(--wf-space-6);
    }
  }

  /* Week Navigation */
  .wf-schedule__week-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--wf-space-6);
  }

  @media (max-width: 480px) {
    .wf-schedule__week-nav {
      flex-direction: column;
      gap: var(--wf-space-4);
    }
  }

  .wf-schedule__week-nav-left {
    display: flex;
    align-items: center;
    gap: var(--wf-space-3);
  }

  .wf-schedule__nav-btn {
    padding: var(--wf-space-2);
    background: var(--wf-surface-subtle);
    border: 1px solid var(--wf-color-border);
    border-radius: var(--wf-radius-md);
    cursor: pointer;
    transition: all var(--wf-duration-base) var(--wf-ease-in-out);
    color: var(--wf-color-text);
  }

  .wf-schedule__nav-btn:hover {
    background: var(--wf-surface-muted);
    border-color: var(--wf-color-accent);
  }

  .wf-schedule__week-title {
    font-size: var(--wf-font-lg);
    font-weight: 600;
    color: var(--wf-color-text);
  }

  .wf-schedule__status-text {
    font-size: var(--wf-font-sm);
    color: var(--wf-color-muted);
  }

  .wf-schedule__status-locked {
    color: var(--wf-color-accent);
    font-weight: 500;
  }

  /* Daily Section */
  .wf-schedule__daily {
    margin-bottom: var(--wf-space-6);
  }

  .wf-schedule__daily-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--wf-space-4);
  }

  @media (max-width: 480px) {
    .wf-schedule__daily-header {
      flex-direction: column;
      gap: var(--wf-space-2);
    }
  }

  .wf-schedule__daily-title {
    font-size: var(--wf-font-lg);
    font-weight: 600;
    color: var(--wf-color-text);
    display: flex;
    align-items: center;
    gap: var(--wf-space-2);
  }

  /* Time Grid */
  .wf-schedule__time-grid {
    display: grid;
    gap: 2px;
    background: var(--wf-surface-muted);
    padding: var(--wf-space-2);
    border-radius: var(--wf-radius-md);
    user-select: none;
  }

  .wf-schedule__time-grid--cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .wf-schedule__time-grid--cols-6 {
    grid-template-columns: repeat(3, 1fr);
  }

  .wf-schedule__time-grid--cols-8 {
    grid-template-columns: repeat(4, 1fr);
  }

  @media (min-width: 640px) {
    .wf-schedule__time-grid {
      padding: var(--wf-space-4);
      gap: var(--wf-space-1);
    }

    .wf-schedule__time-grid--cols-4 {
      grid-template-columns: repeat(4, 1fr);
    }

    .wf-schedule__time-grid--cols-6 {
      grid-template-columns: repeat(6, 1fr);
    }

    .wf-schedule__time-grid--cols-8 {
      grid-template-columns: repeat(8, 1fr);
    }
  }

  /* Time Slot */
  .wf-schedule__time-slot {
    padding: var(--wf-space-1);
    font-size: var(--wf-font-sm);
    text-align: center;
    border: 1px solid var(--wf-color-border);
    border-radius: var(--wf-radius-sm);
    cursor: pointer;
    transition: all var(--wf-duration-base) var(--wf-ease-in-out);
    background: var(--wf-surface-base);
    color: var(--wf-color-text);
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  @media (min-width: 640px) {
    .wf-schedule__time-slot {
      padding: var(--wf-space-2);
      min-height: auto;
    }
  }

  .wf-schedule__time-slot:hover {
    background: var(--wf-surface-subtle);
    border-color: var(--wf-color-accent);
  }

  .wf-schedule__time-slot.is-selected {
    background: var(--wf-primary-bg);
    color: var(--wf-primary-fg);
    border-color: var(--wf-color-accent);
    box-shadow: var(--wf-shadow-sm);
  }

  .wf-schedule__time-slot.is-range-start {
    background: var(--wf-warning);
    color: var(--wf-warning-fg);
    border-color: var(--wf-warning-text);
    animation-name: wf-schedule-pulse;
    animation-duration: calc(var(--wf-enable-motion, 1) * var(--wf-pulse-duration, 4s));
    animation-iteration-count: infinite;
    box-shadow: var(--wf-shadow-md);
  }

  @keyframes wf-schedule-pulse {
    0%,
    100% {
      outline: 2px solid transparent;
      outline-offset: 0;
    }
    50% {
      outline: 2px solid var(--wf-warning-text);
      outline-offset: 2px;
    }
  }

  /* Weekly Calendar */
  .wf-schedule__weekly {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .wf-schedule__calendar-grid {
    display: grid;
    grid-template-columns: 50px repeat(7, minmax(60px, 1fr));
    gap: 1px;
    min-width: 500px;
  }

  .wf-schedule__calendar-header {
    display: grid;
    grid-template-columns: 50px repeat(7, minmax(60px, 1fr));
    gap: 1px;
    margin-bottom: var(--wf-space-2);
    min-width: 500px;
  }

  @media (min-width: 768px) {
    .wf-schedule__calendar-grid {
      grid-template-columns: 70px repeat(7, 1fr);
      min-width: 600px;
      gap: 2px;
    }

    .wf-schedule__calendar-header {
      grid-template-columns: 70px repeat(7, 1fr);
      min-width: 600px;
      gap: 2px;
    }
  }

  .wf-schedule__time-label {
    padding: var(--wf-space-2);
    text-align: center;
    font-size: var(--wf-font-sm);
    font-weight: 500;
    color: var(--wf-color-muted);
  }

  .wf-schedule__date-header {
    padding: var(--wf-space-2);
    text-align: center;
  }

  .wf-schedule__date-weekday {
    font-size: var(--wf-font-sm);
    font-weight: 500;
    color: var(--wf-color-text);
  }

  .wf-schedule__date-day {
    font-size: var(--wf-font-sm);
    color: var(--wf-color-muted);
  }

  .wf-schedule__week-time-label {
    padding: var(--wf-space-1);
    text-align: center;
    font-size: var(--wf-font-sm);
    color: var(--wf-color-muted);
    background: var(--wf-surface-subtle);
    border-radius: var(--wf-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
  }

  @media (min-width: 768px) {
    .wf-schedule__week-time-label {
      padding: var(--wf-space-2);
      min-height: auto;
    }
  }

  .wf-schedule__week-time-slot {
    padding: var(--wf-space-1);
    font-size: var(--wf-font-sm);
    text-align: center;
    border: 1px solid var(--wf-color-border);
    border-radius: var(--wf-radius-sm);
    cursor: pointer;
    transition: all var(--wf-duration-base) var(--wf-ease-in-out);
    background: var(--wf-surface-base);
    color: var(--wf-color-text);
    min-height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  @media (min-width: 768px) {
    .wf-schedule__week-time-slot {
      padding: var(--wf-space-2);
      min-height: auto;
    }
  }

  .wf-schedule__week-time-slot:hover {
    background: var(--wf-surface-subtle);
    border-color: var(--wf-color-accent);
  }

  .wf-schedule__week-time-slot.is-selected {
    background: var(--wf-primary-bg);
    color: var(--wf-primary-fg);
    border-color: var(--wf-color-accent);
    box-shadow: var(--wf-shadow-sm);
  }

  .wf-schedule__week-time-slot.is-range-start {
    background: var(--wf-warning);
    color: var(--wf-warning-fg);
    border-color: var(--wf-warning-text);
    animation-name: wf-schedule-pulse;
    animation-duration: calc(var(--wf-enable-motion, 1) * var(--wf-pulse-duration, 4s));
    animation-iteration-count: infinite;
    box-shadow: var(--wf-shadow-md);
  }

  @media (prefers-reduced-motion: reduce) {
    .wf-schedule__time-slot.is-range-start,
    .wf-schedule__week-time-slot.is-range-start {
      animation: none;
    }
  }

  /* Help Text */
  .wf-schedule__help {
    font-size: var(--wf-font-sm);
    color: var(--wf-color-muted);
    margin-top: var(--wf-space-2);
  }

  /* Action Buttons */
  .wf-schedule__actions {
    display: flex;
    flex-direction: row;
    gap: var(--wf-space-2);
    margin-bottom: var(--wf-space-4);
    max-width: 300px;
  }

  @media (min-width: 768px) {
    .wf-schedule__actions {
      gap: var(--wf-space-4);
      margin-bottom: var(--wf-space-6);
    }
  }

  /* Output Section */
  .wf-schedule__output {
    background: var(--wf-surface-base);
    border-radius: var(--wf-radius-md);
    padding: var(--wf-space-4);
    box-shadow: var(--wf-shadow-md);
  }

  @media (min-width: 768px) {
    .wf-schedule__output {
      padding: var(--wf-space-6);
    }
  }

  .wf-schedule__output-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--wf-space-4);
  }

  @media (max-width: 480px) {
    .wf-schedule__output-header {
      flex-direction: column;
      gap: var(--wf-space-4);
    }
  }

  .wf-schedule__output-title {
    font-size: var(--wf-font-lg);
    font-weight: 600;
    color: var(--wf-color-text);
  }

  .wf-schedule__output-box {
    background: var(--wf-surface-subtle);
    padding: var(--wf-space-4);
    border-radius: var(--wf-radius-md);
    border: 2px dashed var(--wf-color-border);
  }

  .wf-schedule__output-text {
    white-space: pre-wrap;
    color: var(--wf-color-text);
    font-size: var(--wf-font-sm);
    line-height: var(--wf-leading-normal);
    font-family:
      ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  }

  /* Hidden State */
  .wf-schedule.is-hidden {
    display: none;
  }
}
/*!
 * @component Avatar
 * @description Avatar component.
 * @selector .wf-avatar
 * @variants .wf-avatar-sm, .wf-avatar-lg, .wf-avatar-img, .wf-avatar-square, .wf-avatar-status
 * @variables --wf-color-accent-muted, --wf-color-text, --wf-font-sm, --wf-font-lg, --wf-radius-md
 */
@layer components {
  /* Avatar */
  .wf-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--wf-color-accent-muted);
    color: var(--wf-color-text);
    font-weight: 700;
    overflow: hidden;
  }
  .wf-avatar-sm {
    width: 24px;
    height: 24px;
    font-size: var(--wf-font-sm);
  }
  .wf-avatar-lg {
    width: 48px;
    height: 48px;
    font-size: var(--wf-font-lg);
  }
  .wf-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .wf-avatar-square {
    border-radius: var(--wf-radius-md);
  }
  .wf-avatar-status {
    position: relative;
    /* 状態の点は円の外側にはみ出して描くので切り取らない（画像は角丸を継承して収める） */
    overflow: visible;
  }
  .wf-avatar-status > .wf-avatar-img {
    border-radius: inherit;
  }
  .wf-avatar-status::after {
    content: "";
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--wf-success-text);
    border: 2px solid var(--wf-surface-base);
  }
}
/*!
 * @component Skeleton
 * @description Skeleton component.
 * @selector .wf-skeleton
 * @variants .wf-skeleton-line, .wf-sm, .wf-lg, .wf-skeleton-circle, .wf-skeleton-rect
 * @variables --wf-surface-muted, --wf-surface-subtle, --wf-skeleton-duration, --wf-radius-sm
 */
@layer components {
  /* Skeleton Loader */
  @keyframes wf-shimmer {
    0% {
      background-position: -200% 0;
    }
    100% {
      background-position: 200% 0;
    }
  }
  .wf-skeleton {
    background: linear-gradient(
      90deg,
      var(--wf-surface-muted) 25%,
      var(--wf-surface-subtle) 37%,
      var(--wf-surface-muted) 63%
    );
    background-size: 200% 100%;
    animation-name: wf-shimmer;
    animation-duration: calc(var(--wf-enable-motion, 1) * var(--wf-skeleton-duration, 8s));
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    border-radius: var(--wf-radius-sm);
  }
  .wf-skeleton-line {
    height: 1em;
  }
  .wf-skeleton-line.wf-sm {
    height: 0.75em;
  }
  .wf-skeleton-line.wf-lg {
    height: 1.25em;
  }
  .wf-skeleton-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }
  .wf-skeleton-rect {
    width: 100%;
    height: 120px;
  }

  /* Respect reduced motion preferences */
  @media (prefers-reduced-motion: reduce) {
    .wf-skeleton {
      animation: none;
    }
  }
}
/*!
 * @component Empty
 * @description Empty component.
 * @selector .wf-empty
 * @variants 
 * @variables --wf-color-border, --wf-radius-md, --wf-surface-base, --wf-space-6, --wf-color-muted
 */
@layer components {
  /* Empty State */
  .wf-empty {
    text-align: center;
    border: 1px solid var(--wf-color-border);
    border-radius: var(--wf-radius-md);
    background: var(--wf-surface-base);
    padding: var(--wf-space-6);
    color: var(--wf-color-muted);
  }
  .wf-empty__icon {
    font-size: 2rem;
    color: var(--wf-color-accent);
    margin-bottom: var(--wf-space-2);
    display: inline-block;
  }
  .wf-empty__title {
    margin: 0 0 var(--wf-space-2);
    font-weight: 700;
    color: var(--wf-color-text);
  }
  .wf-empty__desc {
    margin: 0 0 var(--wf-space-4);
  }
  .wf-empty__actions {
    display: inline-flex;
    gap: var(--wf-space-2);
  }
}
/*!
 * @component Divider
 * @description Divider component.
 * @selector .wf-divider
 * @variants .wf-divider--horizontal, .wf-divider--vertical, .wf-divider--strong, .wf-divider--sm, .wf-divider--lg
 * @variables --wf-color-border, --wf-space-6, --wf-space-3, --wf-color-border-strong, --wf-space-10
 */
@layer components {
  /* Divider - Simple visual separator */
  .wf-divider {
    height: 1px;
    background: var(--wf-color-border);
    border: none;
    margin: var(--wf-space-6) 0;
  }

  /* Horizontal divider (default) */
  .wf-divider--horizontal {
    width: 100%;
    height: 1px;
  }

  /* Vertical divider */
  .wf-divider--vertical {
    width: 1px;
    height: auto;
    min-height: 24px;
    margin: 0 var(--wf-space-3);
    display: inline-block;
    vertical-align: middle;
  }

  /* Strong variant (thicker, darker) */
  .wf-divider--strong {
    height: 2px;
    background: var(--wf-color-border-strong);
  }

  .wf-divider--vertical.wf-divider--strong {
    width: 2px;
    height: auto;
  }

  /* Spacing variants */
  .wf-divider--sm {
    margin: var(--wf-space-3) 0;
  }

  .wf-divider--lg {
    margin: var(--wf-space-10) 0;
  }

  .wf-divider--vertical.wf-divider--sm {
    margin: 0 var(--wf-space-2);
  }

  .wf-divider--vertical.wf-divider--lg {
    margin: 0 var(--wf-space-6);
  }

  /* Divider with text */
  .wf-divider--text {
    position: relative;
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--wf-color-muted);
    font-size: var(--wf-font-sm);
    background: transparent;
    height: auto;
    margin: var(--wf-space-6) 0;
  }

  .wf-divider--text::before,
  .wf-divider--text::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--wf-color-border);
  }

  .wf-divider--text::before {
    margin-right: var(--wf-space-3);
  }

  .wf-divider--text::after {
    margin-left: var(--wf-space-3);
  }

  /* Accessibility - semantic separator */
  hr.wf-divider {
    border: none;
  }
}
/*!
 * @component Code
 * @description Code component.
 * @selector .wf-code
 * @variants .wf-kbd, .wf-code-block, .wf-code-block--copy, .wf-code-copy, .wf-code--sm
 * @variables --wf-space-2, --wf-leading-tight, --wf-color-text, --wf-surface-muted, --wf-color-border
 */
@layer components {
  /* Code - Inline code and keyboard elements */

  /* Inline code */
  .wf-code,
  code {
    display: inline-block;
    padding: 2px var(--wf-space-2);
    font-family:
      ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.875em;
    line-height: var(--wf-leading-tight);
    color: var(--wf-color-text);
    background: var(--wf-surface-muted);
    border: 1px solid var(--wf-color-border);
    border-radius: var(--wf-radius-sm);
  }

  /* Keyboard key */
  .wf-kbd,
  kbd {
    display: inline-block;
    padding: 2px var(--wf-space-2);
    font-family:
      ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.875em;
    font-weight: 600;
    line-height: var(--wf-leading-none);
    color: var(--wf-color-text);
    background: var(--wf-surface-base);
    border: 1px solid var(--wf-color-border-strong);
    border-bottom-width: 2px;
    border-radius: var(--wf-radius-sm);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
    white-space: nowrap;
  }

  /* Code block (for pre > code) */
  .wf-code-block,
  pre {
    position: relative;
    display: block;
    padding: var(--wf-space-4);
    margin: var(--wf-space-4) 0;
    font-family:
      ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: var(--wf-font-sm);
    line-height: var(--wf-leading-relaxed);
    color: var(--wf-color-text);
    background: var(--wf-surface-muted);
    border: 1px solid var(--wf-color-border);
    border-radius: var(--wf-radius-md);
    overflow-x: auto;
  }

  /* Code block with copy button */
  .wf-code-block--copy,
  pre.wf-code-block--copy {
    padding-top: var(--wf-space-10);
  }

  /* Copy button */
  .wf-code-copy {
    position: absolute;
    top: var(--wf-space-2);
    right: var(--wf-space-2);
    padding: var(--wf-space-2) var(--wf-space-3);
    font-size: var(--wf-font-sm);
    font-family: var(--wf-font-family-sans);
    color: var(--wf-color-muted);
    background: var(--wf-surface-base);
    border: 1px solid var(--wf-color-border);
    border-radius: var(--wf-radius-sm);
    cursor: pointer;
    transition: all var(--wf-duration-fast) var(--wf-ease-out);
  }

  .wf-code-copy:hover {
    color: var(--wf-color-text);
    background: var(--wf-surface-subtle);
    border-color: var(--wf-color-border-strong);
  }

  .wf-code-copy:focus-visible {
    outline: 2px solid var(--wf-focus);
    outline-offset: 2px;
  }

  .wf-code-copy.is-copied {
    color: var(--wf-success-text);
    border-color: var(--wf-success-text);
  }

  pre code,
  .wf-code-block code {
    padding: 0;
    color: inherit;
    background: transparent;
    border: none;
    font-size: inherit;
  }

  /* External syntax highlighter compatibility (Shiki, Prism, etc.) */
  pre[class*="shiki"],
  pre[data-theme],
  pre[class*="astro-code"] {
    color: unset;
    background: unset;
    border: none;
  }
  pre[class*="shiki"] code,
  pre[data-theme] code,
  pre[class*="astro-code"] code {
    color: inherit;
    background: transparent;
  }

  /* Small variant */
  .wf-code--sm,
  .wf-kbd--sm {
    font-size: 0.75em;
    padding: 1px 4px;
  }

  /* Large variant */
  .wf-code--lg,
  .wf-kbd--lg {
    font-size: 1em;
    padding: 4px var(--wf-space-3);
  }

  /* Keyboard combination */
  .wf-kbd-combo {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  .wf-kbd-combo .wf-kbd,
  .wf-kbd-combo kbd {
    margin: 0;
  }

  .wf-kbd-combo::before {
    content: "+";
    color: var(--wf-color-muted);
    font-weight: 400;
  }

  .wf-kbd-combo:first-child::before {
    content: none;
  }
}
/*!
 * @component Rating
 * @description Rating component.
 * @selector .wf-rating
 * @variants .wf-rating-sm, .wf-rating-lg
 * @variables --wf-space-1, --wf-icon-md, --wf-color-border-strong, --wf-duration-fast, --wf-color-accent
 */
/**
 * Rating/Star Component
 * 評価表示・入力コンポーネント
 */

@layer components {
  /* Rating Container */
  .wf-rating {
    display: inline-flex;
    align-items: center;
    gap: var(--wf-space-1);
  }

  /* Star Item */
  .wf-rating__star {
    display: inline-block;
    width: var(--wf-icon-md);
    height: var(--wf-icon-md);
    font-size: var(--wf-icon-md);
    line-height: 1;
    color: var(--wf-color-border-strong);
    transition: color var(--wf-duration-fast) ease;
    cursor: default;
  }

  /* Filled Star */
  .wf-rating__star.is-filled {
    color: var(--wf-color-accent);
  }

  /* Half Star */
  .wf-rating__star.is-half {
    position: relative;
    color: var(--wf-color-border-strong);
  }

  .wf-rating__star.is-half::before {
    content: "◆";
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    overflow: hidden;
    color: var(--wf-color-accent);
  }

  /* Interactive Rating (Editable) */
  .wf-rating.is-interactive .wf-rating__star {
    cursor: pointer;
  }

  .wf-rating.is-interactive .wf-rating__star:hover,
  .wf-rating.is-interactive .wf-rating__star:focus-visible {
    color: var(--wf-link-color-hover);
    transform: scale(1.1);
  }

  .wf-rating.is-interactive .wf-rating__star:focus-visible {
    outline: 2px solid var(--wf-focus);
    outline-offset: 2px;
    border-radius: 2px;
  }

  /* Size Variants */
  .wf-rating-sm .wf-rating__star {
    width: var(--wf-icon-sm);
    height: var(--wf-icon-sm);
    font-size: var(--wf-icon-sm);
  }

  .wf-rating-lg .wf-rating__star {
    width: var(--wf-icon-lg);
    height: var(--wf-icon-lg);
    font-size: var(--wf-icon-lg);
  }

  /* Rating Value Display */
  .wf-rating__value {
    margin-left: var(--wf-space-2);
    font-size: var(--wf-font-sm);
    color: var(--wf-color-muted);
  }

  /* Disabled State */
  .wf-rating.is-disabled .wf-rating__star {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* Hidden Input for Form Submission */
  .wf-rating__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* Accessible Focus */
  @media (prefers-reduced-motion: reduce) {
    .wf-rating__star {
      transition: none;
    }

    .wf-rating.is-interactive .wf-rating__star:hover,
    .wf-rating.is-interactive .wf-rating__star:focus-visible {
      transform: none;
    }
  }
}
/*!
 * @component Timeline
 * @description Timeline component.
 * @selector .wf-timeline
 * @variants .wf-timeline-horizontal
 * @variables --wf-space-4, --wf-space-8, --wf-space-6, --wf-color-border, --wf-color-accent
 */
/**
 * Timeline Component
 * 時系列表示コンポーネント
 */

@layer components {
  /* Timeline Container */
  .wf-timeline {
    position: relative;
    padding: var(--wf-space-4) 0;
    list-style: none;
  }

  /* Timeline Item */
  .wf-timeline__item {
    position: relative;
    padding-left: var(--wf-space-8);
    padding-bottom: var(--wf-space-6);
  }

  .wf-timeline__item:last-child {
    padding-bottom: 0;
  }

  /* Timeline Line */
  .wf-timeline__item::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 28px;
    bottom: 0;
    width: 2px;
    background-color: var(--wf-color-border-strong);
  }

  .wf-timeline__item:last-child::before {
    display: none;
  }

  /* Timeline Marker */
  .wf-timeline__marker {
    position: absolute;
    left: 0;
    top: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--wf-color-accent);
    border: 3px solid var(--wf-color-bg);
    box-shadow: 0 0 0 2px var(--wf-color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wf-color-accent-fg);
    font-size: var(--wf-font-sm);
  }

  /* Timeline Content */
  .wf-timeline__content {
    background-color: var(--wf-surface-base);
    border: 1px solid var(--wf-color-border);
    border-radius: 8px;
    padding: var(--wf-space-4);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  }

  /* Timeline Header */
  .wf-timeline__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--wf-space-2);
  }

  .wf-timeline__title {
    font-weight: 600;
    color: var(--wf-color-text);
    margin: 0;
    font-size: var(--wf-font-md);
  }

  .wf-timeline__date {
    font-size: var(--wf-font-sm);
    color: var(--wf-color-muted);
  }

  /* Timeline Body */
  .wf-timeline__body {
    color: var(--wf-color-text);
    line-height: 1.6;
  }

  /* Timeline State Variants */
  .wf-timeline__item.is-current .wf-timeline__marker {
    background-color: var(--wf-color-accent);
    box-shadow:
      0 0 0 2px var(--wf-color-accent),
      0 0 0 4px var(--wf-color-accent-muted);
    animation-name: wf-timeline-pulse;
    animation-duration: calc(var(--wf-enable-motion, 1) * var(--wf-pulse-duration, 4s));
    animation-iteration-count: infinite;
  }

  .wf-timeline__item.is-done .wf-timeline__marker {
    background-color: var(--wf-success-text);
    box-shadow: 0 0 0 2px var(--wf-success-text);
  }

  .wf-timeline__item.is-pending .wf-timeline__marker {
    background-color: var(--wf-surface-muted);
    box-shadow: 0 0 0 2px var(--wf-color-border-strong);
    color: var(--wf-color-muted);
  }

  /* transform ではなく scale を使う（横並びではマーカーを transform で中央寄せしているため） */
  @keyframes wf-timeline-pulse {
    0%,
    100% {
      scale: 1;
    }
    50% {
      scale: 1.05;
    }
  }

  /* Horizontal Timeline */
  .wf-timeline-horizontal {
    display: flex;
    overflow-x: auto;
    padding: var(--wf-space-6) 0;
  }

  /* 左右の余白をそろえ、マーカー（項目の中央）がカードの中央に来るようにする */
  .wf-timeline-horizontal .wf-timeline__item {
    flex: 0 0 auto;
    min-width: 200px;
    padding: var(--wf-space-10) var(--wf-space-3) 0;
  }

  /* 線はマーカーの中心の高さ（28px / 2 - 線の太さ / 2）に引く */
  .wf-timeline-horizontal .wf-timeline__item::before {
    inset: 13px 0 auto;
    width: auto;
    height: 2px;
  }

  /* 線は最初のマーカーの中心から最後のマーカーの中心まで */
  .wf-timeline-horizontal .wf-timeline__item:first-child::before {
    left: 50%;
  }

  .wf-timeline-horizontal .wf-timeline__item:last-child::before {
    display: block;
    right: 50%;
  }

  .wf-timeline-horizontal .wf-timeline__marker {
    left: 50%;
    top: 0;
    transform: translateX(-50%);
  }

  /* Responsive */
  @media (max-width: 600px) {
    .wf-timeline__item {
      padding-left: var(--wf-space-6);
    }

    .wf-timeline__marker {
      width: 24px;
      height: 24px;
    }

    .wf-timeline__item::before {
      left: 10px;
      top: 24px;
    }

    .wf-timeline__header {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--wf-space-1);
    }
  }

  /* Accessibility */
  @media (prefers-reduced-motion: reduce) {
    .wf-timeline__item.is-current .wf-timeline__marker {
      animation: none;
    }
  }
}
/*!
 * @component Sidebar
 * @description Sidebar component.
 * @selector .wf-sidebar
 * @variants .wf-sidebar-backdrop
 * @variables --wf-surface-base, --wf-color-border, --wf-duration-base, --wf-space-4, --wf-font-lg
 */
/**
 * Sidebar Component
 * サイドバーナビゲーションコンポーネント
 */

@layer components {
  /* Sidebar Container */
  .wf-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    background-color: var(--wf-surface-base);
    border-right: 1px solid var(--wf-color-border);
    overflow-y: auto;
    transition: transform var(--wf-duration-base) ease;
    z-index: var(--wf-z-drawer);
  }

  /* Sidebar Header */
  .wf-sidebar__header {
    padding: var(--wf-space-4);
    border-bottom: 1px solid var(--wf-color-border);
  }

  .wf-sidebar__title {
    margin: 0;
    font-size: var(--wf-font-lg);
    font-weight: 600;
    color: var(--wf-color-text);
  }

  /* Sidebar Body */
  .wf-sidebar__body {
    padding: var(--wf-space-3);
  }

  /* Sidebar Navigation */
  .wf-sidebar__nav {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  /* Sidebar Nav Item */
  .wf-sidebar__item {
    margin-bottom: var(--wf-space-1);
  }

  /* Sidebar Nav Link */
  .wf-sidebar__link {
    display: flex;
    align-items: center;
    gap: var(--wf-space-3);
    padding: var(--wf-space-3);
    border-radius: 8px;
    color: var(--wf-color-muted);
    text-decoration: none;
    transition: all var(--wf-duration-fast) ease;
    font-weight: 500;
  }

  .wf-sidebar__link:hover {
    background-color: var(--wf-surface-muted);
    color: var(--wf-color-text);
  }

  .wf-sidebar__link:focus-visible {
    outline: 2px solid var(--wf-focus);
    outline-offset: 2px;
  }

  /* Active Link */
  .wf-sidebar__link.is-active {
    background-color: var(--wf-color-accent-muted);
    color: var(--wf-color-accent);
    font-weight: 600;
  }

  /* Sidebar Icon */
  .wf-sidebar__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Sidebar Badge */
  .wf-sidebar__badge {
    margin-left: auto;
    padding: 2px 8px;
    background-color: var(--wf-primary-bg);
    color: var(--wf-primary-fg);
    border-radius: 12px;
    font-size: var(--wf-font-sm);
    font-weight: 600;
  }

  /* Sidebar Group */
  .wf-sidebar__group {
    margin-top: var(--wf-space-4);
  }

  .wf-sidebar__group-title {
    padding: var(--wf-space-2) var(--wf-space-3);
    font-size: var(--wf-font-sm);
    font-weight: 600;
    color: var(--wf-color-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  /* Collapsible Sidebar */
  .wf-sidebar.is-collapsed {
    width: 72px;
  }

  .wf-sidebar.is-collapsed .wf-sidebar__title,
  .wf-sidebar.is-collapsed .wf-sidebar__link span:not(.wf-sidebar__icon),
  .wf-sidebar.is-collapsed .wf-sidebar__badge,
  .wf-sidebar.is-collapsed .wf-sidebar__group-title {
    display: none;
  }

  .wf-sidebar.is-collapsed .wf-sidebar__link {
    justify-content: center;
    padding: var(--wf-space-3);
  }

  /* Toggle Button */
  .wf-sidebar__toggle {
    position: absolute;
    top: var(--wf-space-4);
    right: calc(var(--wf-space-4) * -1);
    transform: translateX(100%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--wf-surface-base);
    border: 1px solid var(--wf-color-border-strong);
    color: var(--wf-color-text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--wf-duration-fast) ease;
    z-index: 1;
  }

  .wf-sidebar__toggle:hover {
    background-color: var(--wf-surface-muted);
  }

  .wf-sidebar__toggle:focus-visible {
    outline: 2px solid var(--wf-focus);
    outline-offset: 2px;
  }

  /* Sidebar Footer */
  .wf-sidebar__footer {
    padding: var(--wf-space-4);
    border-top: 1px solid var(--wf-color-border);
    margin-top: auto;
  }

  /* Responsive - Mobile */
  @media (max-width: 768px) {
    .wf-sidebar {
      transform: translateX(-100%);
    }

    .wf-sidebar.is-open {
      transform: translateX(0);
    }

    /* Backdrop */
    .wf-sidebar-backdrop {
      position: fixed;
      inset: 0;
      background-color: rgba(0, 0, 0, 0.5);
      opacity: 0;
      visibility: hidden;
      transition:
        opacity var(--wf-duration-base) ease,
        visibility var(--wf-duration-base) ease;
      z-index: var(--wf-z-drawer-backdrop);
    }

    .wf-sidebar-backdrop.is-visible {
      opacity: 1;
      visibility: visible;
    }
  }

  /* Desktop - Always Visible */
  @media (min-width: 769px) {
    .wf-sidebar {
      transform: translateX(0);
    }

    .wf-sidebar-backdrop {
      display: none;
    }
  }

  /* Nested Navigation */
  .wf-sidebar__submenu {
    list-style: none;
    padding: 0;
    margin: 0;
    padding-left: var(--wf-space-6);
    /*
     * 実際の高さ（auto）まで補間する。interpolate-size 非対応のブラウザでは即時に開閉する。
     * 閉じている間は visibility で隠し、中のリンクにフォーカスが移らないようにする。
     */
    /* stylelint-disable-next-line property-no-unknown -- 新しいプロパティのため stylelint が未対応 */
    interpolate-size: allow-keywords;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    transition:
      height var(--wf-duration-base) ease,
      visibility 0s linear var(--wf-duration-base);
  }

  .wf-sidebar__item.is-expanded .wf-sidebar__submenu {
    height: auto;
    visibility: visible;
    transition:
      height var(--wf-duration-base) ease,
      visibility 0s;
  }

  .wf-sidebar__submenu .wf-sidebar__link {
    font-size: var(--wf-font-sm);
    padding: var(--wf-space-2) var(--wf-space-3);
  }

  /* Expand Icon */
  .wf-sidebar__expand {
    margin-left: auto;
    transition: transform var(--wf-duration-fast) ease;
  }

  .wf-sidebar__item.is-expanded .wf-sidebar__expand {
    transform: rotate(90deg);
  }

  /* Accessibility */
  @media (prefers-reduced-motion: reduce) {
    .wf-sidebar,
    .wf-sidebar__link,
    .wf-sidebar__submenu,
    .wf-sidebar__expand,
    .wf-sidebar-backdrop {
      transition: none;
    }
  }
}
/*!
 * @component Carousel
 * @description Carousel component.
 * @selector .wf-carousel
 * @variants .wf-carousel-thumbnails, .wf-carousel-multiple, .wf-carousel-fade, .wf-carousel-16-9, .wf-carousel-4-3
 * @variables --wf-surface-muted, --wf-duration-base, --wf-space-4, --wf-space-2, --wf-font-lg
 */
/**
 * Image/Carousel Component
 * 画像スライダーコンポーネント
 */

@layer components {
  /* Carousel Container */
  .wf-carousel {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background-color: var(--wf-surface-muted);
  }

  /* Carousel Track */
  .wf-carousel__track {
    display: flex;
    transition: transform var(--wf-duration-base) ease;
  }

  /* Carousel Item */
  .wf-carousel__item {
    flex: 0 0 100%;
    width: 100%;
    position: relative;
  }

  .wf-carousel__item img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
  }

  /* Carousel Caption */
  .wf-carousel__caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--wf-space-4);
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
    color: white;
  }

  .wf-carousel__caption h3 {
    margin: 0 0 var(--wf-space-2) 0;
    font-size: var(--wf-font-lg);
  }

  .wf-carousel__caption p {
    margin: 0;
    font-size: var(--wf-font-sm);
    opacity: 0.9;
  }

  /* Navigation Buttons */
  .wf-carousel__button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.9);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--wf-duration-fast) ease;
    z-index: 2;
    color: #1f1f1f;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }

  .wf-carousel__button:hover {
    background-color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  }

  .wf-carousel__button:focus-visible {
    /* 画像の上でも見えるよう白と墨の二重リングにする */
    outline: 2px solid #ffffff;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px #1f1f1f;
  }

  .wf-carousel__button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
  }

  .wf-carousel__button-prev {
    left: var(--wf-space-4);
  }

  .wf-carousel__button-next {
    right: var(--wf-space-4);
  }

  /* Indicators (Dots) */
  .wf-carousel__indicators {
    position: absolute;
    bottom: var(--wf-space-4);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: var(--wf-space-2);
    z-index: 2;
  }

  .wf-carousel__indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    border: none;
    cursor: pointer;
    transition: all var(--wf-duration-fast) ease;
    padding: 0;
  }

  .wf-carousel__indicator:hover {
    background-color: rgba(255, 255, 255, 0.8);
  }

  .wf-carousel__indicator:focus-visible {
    /* 画像の上でも見えるよう白と墨の二重リングにする */
    outline: 2px solid #ffffff;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px #1f1f1f;
  }

  .wf-carousel__indicator.is-active {
    width: 24px;
    border-radius: 4px;
    background-color: white;
  }

  /* Thumbnails Variant */
  .wf-carousel-thumbnails {
    display: flex;
    flex-direction: column;
    gap: var(--wf-space-3);
  }

  .wf-carousel-thumbnails .wf-carousel__main {
    order: 1;
  }

  .wf-carousel-thumbnails .wf-carousel__thumbs {
    order: 2;
    display: flex;
    gap: var(--wf-space-2);
    overflow-x: auto;
    padding: var(--wf-space-2) 0;
  }

  .wf-carousel__thumb {
    flex: 0 0 80px;
    height: 80px;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all var(--wf-duration-fast) ease;
    opacity: 0.6;
  }

  .wf-carousel__thumb:hover {
    opacity: 1;
  }

  .wf-carousel__thumb.is-active {
    opacity: 1;
    border-color: var(--wf-color-accent);
  }

  .wf-carousel__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Autoplay Indicator（文字ではなく図形で描き、読み上げ・フォント差の影響を受けないようにする） */
  .wf-carousel__button-play::before {
    content: "";
    box-sizing: border-box;
  }
  .wf-carousel.is-playing .wf-carousel__button-play::before {
    /* 一時停止: 2 本の縦棒 */
    width: 12px;
    height: 14px;
    border-left: 4px solid currentColor;
    border-right: 4px solid currentColor;
  }
  .wf-carousel:not(.is-playing) .wf-carousel__button-play::before {
    /* 再生: 右向きの三角形（見た目の重心を合わせるため少し右へ） */
    width: 0;
    height: 0;
    margin-left: 3px;
    border-left: 12px solid currentColor;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
  }

  /* Multiple Items Variant */
  .wf-carousel-multiple .wf-carousel__item {
    flex: 0 0 33.333%;
    padding: 0 var(--wf-space-2);
  }

  @media (max-width: 900px) {
    .wf-carousel-multiple .wf-carousel__item {
      flex: 0 0 50%;
    }
  }

  @media (max-width: 600px) {
    .wf-carousel-multiple .wf-carousel__item {
      flex: 0 0 100%;
    }
  }

  /* Fade Transition Variant */
  .wf-carousel-fade .wf-carousel__track {
    position: relative;
  }

  .wf-carousel-fade .wf-carousel__item {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity var(--wf-duration-base) ease;
    pointer-events: none;
  }

  .wf-carousel-fade .wf-carousel__item.is-active {
    opacity: 1;
    pointer-events: auto;
    position: relative;
  }

  /* Aspect Ratio Control */
  .wf-carousel-16-9 .wf-carousel__item img {
    aspect-ratio: 16 / 9;
  }

  .wf-carousel-4-3 .wf-carousel__item img {
    aspect-ratio: 4 / 3;
  }

  .wf-carousel-square .wf-carousel__item img {
    aspect-ratio: 1 / 1;
  }

  /* Responsive */
  @media (max-width: 600px) {
    .wf-carousel__button {
      width: 36px;
      height: 36px;
    }

    .wf-carousel__button-prev {
      left: var(--wf-space-2);
    }

    .wf-carousel__button-next {
      right: var(--wf-space-2);
    }

    .wf-carousel__caption {
      padding: var(--wf-space-3);
    }

    .wf-carousel__caption h3 {
      font-size: var(--wf-font-md);
    }
  }

  /* Accessibility */
  .wf-carousel__sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  @media (prefers-reduced-motion: reduce) {
    .wf-carousel__track,
    .wf-carousel__item,
    .wf-carousel__button,
    .wf-carousel__indicator,
    .wf-carousel__thumb {
      transition: none;
    }
  }
}
/*!
 * @component Switch
 * @description Switch component.
 * @selector .wf-switch
 * @variants 
 * @variables --wf-color-border-strong, --wf-surface-base, --wf-color-accent, --wf-focus, --wf-space-2
 */
@layer components {
  /* Switch */
  .wf-switch {
    appearance: none;
    width: 38px;
    height: 22px;
    border: 2px solid var(--wf-color-border-strong);
    border-radius: 9999px;
    background: var(--wf-surface-base);
    position: relative;
    cursor: pointer;
    transition:
      background 0.2s ease,
      border-color 0.2s ease;
  }
  .wf-switch::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 2px;
    width: 16px;
    height: 16px;
    background: var(--wf-color-border-strong);
    border-radius: 50%;
    transition:
      transform 0.2s ease,
      background 0.2s ease;
    transform: translateY(-50%);
  }
  .wf-switch:checked {
    background: var(--wf-color-accent);
    border-color: var(--wf-color-accent);
  }
  .wf-switch:checked::after {
    /* Move horizontally by innerWidth - knobWidth - leftOffset*2 = 34 - 16 - 2*2 = 14px */
    transform: translate(14px, -50%);
    background: var(--wf-color-accent-fg);
  }
  .wf-switch:focus {
    outline: 2px solid var(--wf-focus);
    outline-offset: 2px;
  }
  .wf-switch__label {
    display: inline-flex;
    align-items: center;
    gap: var(--wf-space-2);
    cursor: pointer;
  }
}
/*!
 * @component Range
 * @description Range component.
 * @selector .wf-range
 * @variants 
 * @variables --wf-color-border-strong, --wf-radius-full, --wf-color-accent, --wf-color-accent-fg, --wf-focus
 */
@layer components {
  /* Range */
  .wf-range {
    width: 100%;
    appearance: none;
    /* internal sizing tokens for this component */
    --_track-h: 4px;
    --_thumb: 16px;
    /* make the control box as tall as the thumb so vertical centering is natural */
    height: var(--_thumb);
    background: transparent;
    outline: none;
  }
  /* WebKit track */
  .wf-range::-webkit-slider-runnable-track {
    height: var(--_track-h);
    background: var(--wf-color-border-strong);
    border-radius: var(--wf-radius-full);
  }
  .wf-range::-webkit-slider-thumb {
    appearance: none;
    width: var(--_thumb);
    height: var(--_thumb);
    border-radius: 50%;
    background: var(--wf-color-accent);
    cursor: pointer;
    border: 2px solid var(--wf-color-accent-fg);
    /* center the thumb over the track */
    margin-top: calc((var(--_thumb) - var(--_track-h)) / -2);
  }
  /* Focus visible (WebKit) */
  .wf-range:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px var(--wf-focus);
  }
  .wf-range:focus-visible::-webkit-slider-runnable-track {
    background: var(--wf-color-accent);
  }
  /* Firefox track */
  .wf-range::-moz-range-track {
    height: var(--_track-h);
    background: var(--wf-color-border-strong);
    border-radius: var(--wf-radius-full);
  }
  .wf-range::-moz-range-thumb {
    width: var(--_thumb);
    height: var(--_thumb);
    border-radius: 50%;
    background: var(--wf-color-accent);
    cursor: pointer;
    border: 2px solid var(--wf-color-accent-fg);
  }
  /* Focus visible (Firefox) */
  .wf-range:focus-visible::-moz-range-thumb {
    box-shadow: 0 0 0 3px var(--wf-focus);
  }
  .wf-range:focus-visible::-moz-range-track {
    background: var(--wf-color-accent);
  }
}
/*!
 * @component Input Group
 * @description Input Group component.
 * @selector .wf-input-group
 * @variants .wf-input, .wf-select, .wf-textarea, .wf-btn
 * @variables --wf-radius-md, --wf-space-3, --wf-color-accent, --wf-surface-subtle, --wf-color-text
 */
@layer components {
  /* Input Group */
  .wf-input-group {
    display: flex;
    align-items: stretch;
    width: 100%;
  }
  .wf-input-group > .wf-input,
  .wf-input-group > .wf-select,
  .wf-input-group > .wf-textarea {
    flex: 1 1 auto;
    min-width: 0;
    border-radius: 0;
  }
  .wf-input-group > .wf-input:first-child {
    border-top-left-radius: var(--wf-radius-md);
    border-bottom-left-radius: var(--wf-radius-md);
  }
  .wf-input-group > .wf-input:last-child {
    border-top-right-radius: var(--wf-radius-md);
    border-bottom-right-radius: var(--wf-radius-md);
  }
  .wf-input-group__text {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--wf-space-3);
    border: 1px solid var(--wf-color-accent);
    background: var(--wf-surface-subtle);
    color: var(--wf-color-text);
  }
  .wf-input-group__prepend .wf-input-group__text {
    border-top-left-radius: var(--wf-radius-md);
    border-bottom-left-radius: var(--wf-radius-md);
  }
  .wf-input-group__append .wf-input-group__text {
    border-top-right-radius: var(--wf-radius-md);
    border-bottom-right-radius: var(--wf-radius-md);
  }
  .wf-input-group > .wf-btn,
  .wf-input-group > .wf-input-group__text {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .wf-input-group > .wf-btn {
    border-radius: 0;
    background: var(--wf-primary-bg);
    border-color: var(--wf-primary-bg);
    color: var(--wf-primary-fg);
  }
  .wf-input-group > .wf-btn:hover,
  .wf-input-group > .wf-btn:focus-visible {
    background: var(--wf-primary-bg-hover);
    border-color: var(--wf-primary-bg-hover);
  }
  .wf-input-group > .wf-btn:first-child {
    border-top-left-radius: var(--wf-radius-md);
    border-bottom-left-radius: var(--wf-radius-md);
  }
  .wf-input-group > .wf-btn:last-child {
    border-top-right-radius: var(--wf-radius-md);
    border-bottom-right-radius: var(--wf-radius-md);
  }

  /* モバイル対応: 縦並び */
  @media (max-width: 600px) {
    .wf-input-group {
      flex-direction: column;
    }

    /* すべての子要素に角丸を復元 */
    .wf-input-group > * {
      border-radius: var(--wf-radius-md) !important;
    }

    /* 最初以外の要素に上マージンを追加 */
    .wf-input-group > *:not(:first-child) {
      margin-top: var(--wf-space-2);
    }
  }
}
/*!
 * @component Floating Label
 * @description Floating Label component.
 * @selector .wf-form-floating
 * @variants .wf-input, .wf-textarea
 * @variables --wf-space-4, --wf-color-muted, --wf-color-accent
 */
@layer components {
  /* Floating Label */
  .wf-form-floating {
    position: relative;
  }
  .wf-form-floating > .wf-input,
  .wf-form-floating > .wf-textarea {
    padding-top: calc(var(--wf-space-4) + 6px);
  }
  .wf-form-floating > label {
    position: absolute;
    top: 8px;
    left: 12px;
    color: var(--wf-color-muted);
    background: transparent;
    transition: all 0.12s ease;
    pointer-events: none;
  }
  .wf-form-floating > .wf-input:focus + label,
  .wf-form-floating > .wf-input:not(:placeholder-shown) + label,
  .wf-form-floating > .wf-textarea:focus + label,
  .wf-form-floating > .wf-textarea:not(:placeholder-shown) + label {
    transform: translateY(-8px) scale(0.9);
    color: var(--wf-color-accent);
  }
}
/*!
 * @component File
 * @description File component.
 * @selector .wf-file
 * @variants 
 * @variables --wf-space-2, --wf-space-3, --wf-color-border-strong, --wf-radius-md, --wf-surface-base
 */
@layer components {
  /* File input */
  .wf-file {
    display: block;
    width: 100%;
    padding: var(--wf-space-2) var(--wf-space-3);
    border: 1px solid var(--wf-color-border-strong);
    border-radius: var(--wf-radius-md);
    background: var(--wf-surface-base);
  }
}
/*!
 * @component Snackbar
 * @description Snackbar component.
 * @selector .wf-snackbar-container
 * @variants .wf-snackbar-container--top-left, .wf-snackbar-container--top-right, .wf-snackbar-container--bottom-left, .wf-snackbar-container--bottom-right, .wf-snackbar-container--top-center
 * @variables --wf-space-2, --wf-space-4, --wf-space-3, --wf-surface-base, --wf-color-border
 */
@layer components {
  /* Snackbar - Stack-managed notifications */
  .wf-snackbar-container {
    position: fixed;
    z-index: var(--wf-z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--wf-space-2);
    padding: var(--wf-space-4);
    pointer-events: none;
    max-width: 400px;
  }

  .wf-snackbar-container--top-left {
    top: 0;
    left: 0;
  }

  .wf-snackbar-container--top-right {
    top: 0;
    right: 0;
  }

  .wf-snackbar-container--bottom-left {
    bottom: 0;
    left: 0;
  }

  .wf-snackbar-container--bottom-right {
    bottom: 0;
    right: 0;
  }

  .wf-snackbar-container--top-center {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }

  .wf-snackbar-container--bottom-center {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }

  .wf-snackbar {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--wf-space-3);
    padding: var(--wf-space-3) var(--wf-space-4);
    background: var(--wf-surface-base);
    border: 1px solid var(--wf-color-border);
    border-left: 3px solid var(--wf-color-accent);
    border-radius: var(--wf-radius-md);
    box-shadow: var(--wf-shadow-md);
    min-width: 280px;
    max-width: 400px;
    pointer-events: auto;
    animation-name: wf-snackbar-in;
    animation-duration: calc(var(--wf-enable-motion, 1) * var(--wf-duration-base));
    animation-timing-function: var(--wf-ease-out);
  }

  .wf-snackbar__content {
    flex: 1;
    font-size: var(--wf-font-sm);
    line-height: var(--wf-leading-normal);
    color: var(--wf-color-text);
  }

  .wf-snackbar__message {
    margin: 0;
  }

  .wf-snackbar__close {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--wf-color-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--wf-radius-sm);
    transition: color var(--wf-duration-fast) var(--wf-ease-out);
  }

  .wf-snackbar__close:hover {
    color: var(--wf-color-text);
    background: var(--wf-surface-muted);
  }

  .wf-snackbar__close:focus-visible {
    outline: 2px solid var(--wf-focus);
    outline-offset: 2px;
  }

  /* Variants */
  .wf-snackbar--success {
    border-left-color: var(--wf-success-text);
  }

  .wf-snackbar--success .wf-snackbar__message {
    color: var(--wf-success-text);
  }

  .wf-snackbar--warning {
    border-left-color: var(--wf-warning-text);
  }

  .wf-snackbar--warning .wf-snackbar__message {
    color: var(--wf-warning-text);
  }

  .wf-snackbar--danger {
    border-left-color: var(--wf-danger-text);
  }

  .wf-snackbar--danger .wf-snackbar__message {
    color: var(--wf-danger-text);
  }

  .wf-snackbar--info {
    border-left-color: var(--wf-color-accent);
  }

  .wf-snackbar--info .wf-snackbar__message {
    color: var(--wf-color-accent);
  }

  /* Animation */
  .wf-snackbar.is-removing {
    animation-name: wf-slide-up-reverse;
    animation-duration: calc(var(--wf-enable-motion, 1) * var(--wf-duration-base));
    animation-timing-function: var(--wf-ease-in);
    animation-fill-mode: forwards;
  }

  @keyframes wf-snackbar-in {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes wf-slide-up-reverse {
    from {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
    to {
      opacity: 0;
      transform: translateY(-8px) scale(0.95);
    }
  }

  /* Reduced motion support */
  @media (prefers-reduced-motion: reduce) {
    .wf-snackbar {
      animation: none;
    }

    .wf-snackbar.is-removing {
      animation: none;
      opacity: 0;
    }
  }

  /* Mobile responsive */
  @media (max-width: 600px) {
    .wf-snackbar-container {
      left: var(--wf-space-2);
      right: var(--wf-space-2);
      max-width: none;
      padding: var(--wf-space-2);
    }

    .wf-snackbar {
      min-width: 0;
      max-width: none;
    }

    .wf-snackbar-container--top-center,
    .wf-snackbar-container--bottom-center {
      left: var(--wf-space-2);
      right: var(--wf-space-2);
      transform: none;
    }
  }
}
/*!
 * @component Data Table
 * @description Data Table component.
 * @selector .wf-data-table
 * @variants .wf-data-table--striped, .wf-data-table--bordered
 * @variables --wf-surface-base, --wf-space-4, --wf-color-border, --wf-space-2, --wf-space-3
 */
@layer components {
  /* Data Table - Enhanced table with sort and filter */
  .wf-data-table {
    width: 100%;
    background: var(--wf-surface-base);
  }

  .wf-data-table__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wf-space-4);
    padding: var(--wf-space-4);
    border-bottom: 1px solid var(--wf-color-border);
    flex-wrap: wrap;
  }

  .wf-data-table__search {
    flex: 1;
    min-width: 200px;
    max-width: 400px;
  }

  .wf-data-table__actions {
    display: flex;
    align-items: center;
    gap: var(--wf-space-2);
  }

  .wf-data-table__wrapper {
    overflow-x: auto;
  }

  .wf-data-table__table {
    width: 100%;
    min-width: 500px;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--wf-surface-base);
  }

  .wf-data-table__table th,
  .wf-data-table__table td {
    padding: var(--wf-space-3) var(--wf-space-4);
    border-bottom: 1px solid var(--wf-color-border);
    text-align: left;
  }

  .wf-data-table__table thead th {
    background: var(--wf-surface-base);
    position: relative;
    font-weight: 700;
    user-select: none;
  }

  .wf-data-table__sort {
    display: inline-flex;
    align-items: center;
    gap: var(--wf-space-1);
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
    width: 100%;
    text-align: left;
  }

  .wf-data-table__sort:hover {
    color: var(--wf-color-accent);
  }

  .wf-data-table__sort-icon {
    font-size: 0.75em;
    color: var(--wf-color-muted);
    opacity: 0;
    transition: opacity var(--wf-duration-fast) var(--wf-ease-out);
  }

  .wf-data-table__table th:hover .wf-data-table__sort-icon,
  .wf-data-table__table th[aria-sort] .wf-data-table__sort-icon {
    opacity: 1;
  }

  .wf-data-table__table th[aria-sort="ascending"] .wf-data-table__sort-icon::before {
    content: "▲";
  }

  .wf-data-table__table th[aria-sort="descending"] .wf-data-table__sort-icon::before {
    content: "▼";
  }

  .wf-data-table__table tbody tr {
    transition: background-color var(--wf-duration-fast) var(--wf-ease-out);
  }

  .wf-data-table__table tbody tr:hover {
    background: var(--wf-surface-subtle);
  }

  .wf-data-table__table tbody tr.is-selected {
    background: var(--wf-surface-muted);
  }

  .wf-data-table__checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
  }

  .wf-data-table__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wf-space-4);
    padding: var(--wf-space-4);
    border-top: 1px solid var(--wf-color-border);
    flex-wrap: wrap;
  }

  .wf-data-table__info {
    color: var(--wf-color-muted);
    font-size: var(--wf-font-sm);
  }

  .wf-data-table__pagination {
    display: flex;
    align-items: center;
    gap: var(--wf-space-2);
  }

  .wf-data-table__empty {
    padding: var(--wf-space-8);
    text-align: center;
    color: var(--wf-color-muted);
  }

  /* Variants */
  .wf-data-table--striped tbody tr:nth-child(odd) {
    background: var(--wf-surface-muted);
  }

  .wf-data-table--bordered {
    border: 1px solid var(--wf-color-border);
  }

  .wf-data-table--bordered th,
  .wf-data-table--bordered td {
    border-right: 1px solid var(--wf-color-border);
  }

  .wf-data-table--bordered td:last-child,
  .wf-data-table--bordered th:last-child {
    border-right: 0;
  }

  /* Mobile responsive */
  @media (max-width: 600px) {
    .wf-data-table__toolbar {
      flex-direction: column;
      align-items: stretch;
    }

    .wf-data-table__search {
      max-width: none;
    }

    .wf-data-table__footer {
      flex-direction: column;
      align-items: stretch;
    }

    .wf-data-table__pagination {
      justify-content: center;
    }
  }
}
/*!
 * @component Autocomplete
 * @description Autocomplete component.
 * @selector .wf-autocomplete
 * @variants 
 * @variables --wf-space-1, --wf-surface-base, --wf-color-border, --wf-radius-md, --wf-shadow-lg
 */
@layer components {
  /* Autocomplete */
  .wf-autocomplete {
    position: relative;
    display: inline-block;
    width: 100%;
  }

  .wf-autocomplete__input {
    width: 100%;
  }

  .wf-autocomplete__menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: var(--wf-z-dropdown);
    margin-top: var(--wf-space-1);
    background: var(--wf-surface-base);
    border: 1px solid var(--wf-color-border);
    border-radius: var(--wf-radius-md);
    box-shadow: var(--wf-shadow-lg);
    max-height: 300px;
    overflow-y: auto;
    display: none;
  }

  @keyframes wf-autocomplete-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  .wf-autocomplete__menu.is-open {
    display: block;
    animation-name: wf-autocomplete-in;
    animation-duration: calc(var(--wf-enable-motion, 1) * var(--wf-duration-fast));
    animation-timing-function: var(--wf-ease-out);
  }

  .wf-autocomplete__item {
    display: block;
    padding: var(--wf-space-3) var(--wf-space-4);
    color: var(--wf-color-text);
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--wf-duration-fast) var(--wf-ease-out);
  }

  .wf-autocomplete__item:hover,
  .wf-autocomplete__item.is-highlighted {
    background: var(--wf-surface-subtle);
    color: var(--wf-color-text);
  }

  .wf-autocomplete__item.is-selected {
    background: var(--wf-surface-muted);
    color: var(--wf-color-accent);
  }

  .wf-autocomplete__empty {
    padding: var(--wf-space-4);
    text-align: center;
    color: var(--wf-color-muted);
    font-size: var(--wf-font-sm);
  }

  .wf-autocomplete__loading {
    padding: var(--wf-space-4);
    text-align: center;
    color: var(--wf-color-muted);
    font-size: var(--wf-font-sm);
  }

  /* Mobile responsive */
  @media (max-width: 600px) {
    .wf-autocomplete__menu {
      max-height: 200px;
    }
  }
}
@layer utilities {
  /* Core Utilities */
  /* Spacing */
  .wf-m-0 {
    margin: 0;
  }
  .wf-m-1 {
    margin: var(--wf-space-1);
  }
  .wf-m-2 {
    margin: var(--wf-space-2);
  }
  .wf-m-3 {
    margin: var(--wf-space-3);
  }
  .wf-m-4 {
    margin: var(--wf-space-4);
  }
  .wf-m-5 {
    margin: var(--wf-space-5);
  }
  .wf-m-6 {
    margin: var(--wf-space-6);
  }
  .wf-m-7 {
    margin: var(--wf-space-7);
  }
  .wf-m-8 {
    margin: var(--wf-space-8);
  }
  .wf-m-10 {
    margin: var(--wf-space-10);
  }
  .wf-m-12 {
    margin: var(--wf-space-12);
  }
  .wf-m-14 {
    margin: var(--wf-space-14);
  }
  .wf-m-16 {
    margin: var(--wf-space-16);
  }
  .wf-m-20 {
    margin: var(--wf-space-20);
  }
  .wf-mt-0 {
    margin-top: 0;
  }
  .wf-mt-1 {
    margin-top: var(--wf-space-1);
  }
  .wf-mt-2 {
    margin-top: var(--wf-space-2);
  }
  .wf-mt-3 {
    margin-top: var(--wf-space-3);
  }
  .wf-mt-4 {
    margin-top: var(--wf-space-4);
  }
  .wf-mt-5 {
    margin-top: var(--wf-space-5);
  }
  .wf-mt-6 {
    margin-top: var(--wf-space-6);
  }
  .wf-mt-7 {
    margin-top: var(--wf-space-7);
  }
  .wf-mt-8 {
    margin-top: var(--wf-space-8);
  }
  .wf-mt-10 {
    margin-top: var(--wf-space-10);
  }
  .wf-mt-12 {
    margin-top: var(--wf-space-12);
  }
  .wf-mt-14 {
    margin-top: var(--wf-space-14);
  }
  .wf-mt-16 {
    margin-top: var(--wf-space-16);
  }
  .wf-mt-20 {
    margin-top: var(--wf-space-20);
  }
  .wf-mr-0 {
    margin-right: 0;
  }
  .wf-mr-1 {
    margin-right: var(--wf-space-1);
  }
  .wf-mr-2 {
    margin-right: var(--wf-space-2);
  }
  .wf-mr-3 {
    margin-right: var(--wf-space-3);
  }
  .wf-mr-4 {
    margin-right: var(--wf-space-4);
  }
  .wf-mr-5 {
    margin-right: var(--wf-space-5);
  }
  .wf-mr-6 {
    margin-right: var(--wf-space-6);
  }
  .wf-mr-7 {
    margin-right: var(--wf-space-7);
  }
  .wf-mr-8 {
    margin-right: var(--wf-space-8);
  }
  .wf-mr-10 {
    margin-right: var(--wf-space-10);
  }
  .wf-mr-12 {
    margin-right: var(--wf-space-12);
  }
  .wf-mr-14 {
    margin-right: var(--wf-space-14);
  }
  .wf-mr-16 {
    margin-right: var(--wf-space-16);
  }
  .wf-mr-20 {
    margin-right: var(--wf-space-20);
  }
  .wf-mb-0 {
    margin-bottom: 0;
  }
  .wf-mb-1 {
    margin-bottom: var(--wf-space-1);
  }
  .wf-mb-2 {
    margin-bottom: var(--wf-space-2);
  }
  .wf-mb-3 {
    margin-bottom: var(--wf-space-3);
  }
  .wf-mb-4 {
    margin-bottom: var(--wf-space-4);
  }
  .wf-mb-5 {
    margin-bottom: var(--wf-space-5);
  }
  .wf-mb-6 {
    margin-bottom: var(--wf-space-6);
  }
  .wf-mb-7 {
    margin-bottom: var(--wf-space-7);
  }
  .wf-mb-8 {
    margin-bottom: var(--wf-space-8);
  }
  .wf-mb-10 {
    margin-bottom: var(--wf-space-10);
  }
  .wf-mb-12 {
    margin-bottom: var(--wf-space-12);
  }
  .wf-mb-14 {
    margin-bottom: var(--wf-space-14);
  }
  .wf-mb-16 {
    margin-bottom: var(--wf-space-16);
  }
  .wf-mb-20 {
    margin-bottom: var(--wf-space-20);
  }
  .wf-ml-0 {
    margin-left: 0;
  }
  .wf-ml-1 {
    margin-left: var(--wf-space-1);
  }
  .wf-ml-2 {
    margin-left: var(--wf-space-2);
  }
  .wf-ml-3 {
    margin-left: var(--wf-space-3);
  }
  .wf-ml-4 {
    margin-left: var(--wf-space-4);
  }
  .wf-ml-5 {
    margin-left: var(--wf-space-5);
  }
  .wf-ml-6 {
    margin-left: var(--wf-space-6);
  }
  .wf-ml-7 {
    margin-left: var(--wf-space-7);
  }
  .wf-ml-8 {
    margin-left: var(--wf-space-8);
  }
  .wf-ml-10 {
    margin-left: var(--wf-space-10);
  }
  .wf-ml-12 {
    margin-left: var(--wf-space-12);
  }
  .wf-ml-14 {
    margin-left: var(--wf-space-14);
  }
  .wf-ml-16 {
    margin-left: var(--wf-space-16);
  }
  .wf-ml-20 {
    margin-left: var(--wf-space-20);
  }
  .wf-mx-0 {
    margin-left: 0;
    margin-right: 0;
  }
  .wf-mx-1 {
    margin-left: var(--wf-space-1);
    margin-right: var(--wf-space-1);
  }
  .wf-mx-2 {
    margin-left: var(--wf-space-2);
    margin-right: var(--wf-space-2);
  }
  .wf-mx-3 {
    margin-left: var(--wf-space-3);
    margin-right: var(--wf-space-3);
  }
  .wf-mx-4 {
    margin-left: var(--wf-space-4);
    margin-right: var(--wf-space-4);
  }
  .wf-mx-5 {
    margin-left: var(--wf-space-5);
    margin-right: var(--wf-space-5);
  }
  .wf-mx-6 {
    margin-left: var(--wf-space-6);
    margin-right: var(--wf-space-6);
  }
  .wf-mx-7 {
    margin-left: var(--wf-space-7);
    margin-right: var(--wf-space-7);
  }
  .wf-mx-8 {
    margin-left: var(--wf-space-8);
    margin-right: var(--wf-space-8);
  }
  .wf-mx-10 {
    margin-left: var(--wf-space-10);
    margin-right: var(--wf-space-10);
  }
  .wf-mx-12 {
    margin-left: var(--wf-space-12);
    margin-right: var(--wf-space-12);
  }
  .wf-mx-14 {
    margin-left: var(--wf-space-14);
    margin-right: var(--wf-space-14);
  }
  .wf-mx-16 {
    margin-left: var(--wf-space-16);
    margin-right: var(--wf-space-16);
  }
  .wf-mx-20 {
    margin-left: var(--wf-space-20);
    margin-right: var(--wf-space-20);
  }
  .wf-my-0 {
    margin-top: 0;
    margin-bottom: 0;
  }
  .wf-my-1 {
    margin-top: var(--wf-space-1);
    margin-bottom: var(--wf-space-1);
  }
  .wf-my-2 {
    margin-top: var(--wf-space-2);
    margin-bottom: var(--wf-space-2);
  }
  .wf-my-3 {
    margin-top: var(--wf-space-3);
    margin-bottom: var(--wf-space-3);
  }
  .wf-my-4 {
    margin-top: var(--wf-space-4);
    margin-bottom: var(--wf-space-4);
  }
  .wf-my-5 {
    margin-top: var(--wf-space-5);
    margin-bottom: var(--wf-space-5);
  }
  .wf-my-6 {
    margin-top: var(--wf-space-6);
    margin-bottom: var(--wf-space-6);
  }
  .wf-my-7 {
    margin-top: var(--wf-space-7);
    margin-bottom: var(--wf-space-7);
  }
  .wf-my-8 {
    margin-top: var(--wf-space-8);
    margin-bottom: var(--wf-space-8);
  }
  .wf-my-10 {
    margin-top: var(--wf-space-10);
    margin-bottom: var(--wf-space-10);
  }
  .wf-my-12 {
    margin-top: var(--wf-space-12);
    margin-bottom: var(--wf-space-12);
  }
  .wf-my-14 {
    margin-top: var(--wf-space-14);
    margin-bottom: var(--wf-space-14);
  }
  .wf-my-16 {
    margin-top: var(--wf-space-16);
    margin-bottom: var(--wf-space-16);
  }
  .wf-my-20 {
    margin-top: var(--wf-space-20);
    margin-bottom: var(--wf-space-20);
  }
  .wf-p-0 {
    padding: 0;
  }
  .wf-p-1 {
    padding: var(--wf-space-1);
  }
  .wf-p-2 {
    padding: var(--wf-space-2);
  }
  .wf-p-3 {
    padding: var(--wf-space-3);
  }
  .wf-p-4 {
    padding: var(--wf-space-4);
  }
  .wf-p-5 {
    padding: var(--wf-space-5);
  }
  .wf-p-6 {
    padding: var(--wf-space-6);
  }
  .wf-p-7 {
    padding: var(--wf-space-7);
  }
  .wf-p-8 {
    padding: var(--wf-space-8);
  }
  .wf-p-10 {
    padding: var(--wf-space-10);
  }
  .wf-p-12 {
    padding: var(--wf-space-12);
  }
  .wf-p-14 {
    padding: var(--wf-space-14);
  }
  .wf-p-16 {
    padding: var(--wf-space-16);
  }
  .wf-p-20 {
    padding: var(--wf-space-20);
  }
  .wf-pt-0 {
    padding-top: 0;
  }
  .wf-pt-1 {
    padding-top: var(--wf-space-1);
  }
  .wf-pt-2 {
    padding-top: var(--wf-space-2);
  }
  .wf-pt-3 {
    padding-top: var(--wf-space-3);
  }
  .wf-pt-4 {
    padding-top: var(--wf-space-4);
  }
  .wf-pt-5 {
    padding-top: var(--wf-space-5);
  }
  .wf-pt-6 {
    padding-top: var(--wf-space-6);
  }
  .wf-pt-7 {
    padding-top: var(--wf-space-7);
  }
  .wf-pt-8 {
    padding-top: var(--wf-space-8);
  }
  .wf-pt-10 {
    padding-top: var(--wf-space-10);
  }
  .wf-pt-12 {
    padding-top: var(--wf-space-12);
  }
  .wf-pt-14 {
    padding-top: var(--wf-space-14);
  }
  .wf-pt-16 {
    padding-top: var(--wf-space-16);
  }
  .wf-pt-20 {
    padding-top: var(--wf-space-20);
  }
  .wf-pr-0 {
    padding-right: 0;
  }
  .wf-pr-1 {
    padding-right: var(--wf-space-1);
  }
  .wf-pr-2 {
    padding-right: var(--wf-space-2);
  }
  .wf-pr-3 {
    padding-right: var(--wf-space-3);
  }
  .wf-pr-4 {
    padding-right: var(--wf-space-4);
  }
  .wf-pr-5 {
    padding-right: var(--wf-space-5);
  }
  .wf-pr-6 {
    padding-right: var(--wf-space-6);
  }
  .wf-pr-7 {
    padding-right: var(--wf-space-7);
  }
  .wf-pr-8 {
    padding-right: var(--wf-space-8);
  }
  .wf-pr-10 {
    padding-right: var(--wf-space-10);
  }
  .wf-pr-12 {
    padding-right: var(--wf-space-12);
  }
  .wf-pr-14 {
    padding-right: var(--wf-space-14);
  }
  .wf-pr-16 {
    padding-right: var(--wf-space-16);
  }
  .wf-pr-20 {
    padding-right: var(--wf-space-20);
  }
  .wf-pb-0 {
    padding-bottom: 0;
  }
  .wf-pb-1 {
    padding-bottom: var(--wf-space-1);
  }
  .wf-pb-2 {
    padding-bottom: var(--wf-space-2);
  }
  .wf-pb-3 {
    padding-bottom: var(--wf-space-3);
  }
  .wf-pb-4 {
    padding-bottom: var(--wf-space-4);
  }
  .wf-pb-5 {
    padding-bottom: var(--wf-space-5);
  }
  .wf-pb-6 {
    padding-bottom: var(--wf-space-6);
  }
  .wf-pb-7 {
    padding-bottom: var(--wf-space-7);
  }
  .wf-pb-8 {
    padding-bottom: var(--wf-space-8);
  }
  .wf-pb-10 {
    padding-bottom: var(--wf-space-10);
  }
  .wf-pb-12 {
    padding-bottom: var(--wf-space-12);
  }
  .wf-pb-14 {
    padding-bottom: var(--wf-space-14);
  }
  .wf-pb-16 {
    padding-bottom: var(--wf-space-16);
  }
  .wf-pb-20 {
    padding-bottom: var(--wf-space-20);
  }
  .wf-pl-0 {
    padding-left: 0;
  }
  .wf-pl-1 {
    padding-left: var(--wf-space-1);
  }
  .wf-pl-2 {
    padding-left: var(--wf-space-2);
  }
  .wf-pl-3 {
    padding-left: var(--wf-space-3);
  }
  .wf-pl-4 {
    padding-left: var(--wf-space-4);
  }
  .wf-pl-5 {
    padding-left: var(--wf-space-5);
  }
  .wf-pl-6 {
    padding-left: var(--wf-space-6);
  }
  .wf-pl-7 {
    padding-left: var(--wf-space-7);
  }
  .wf-pl-8 {
    padding-left: var(--wf-space-8);
  }
  .wf-pl-10 {
    padding-left: var(--wf-space-10);
  }
  .wf-pl-12 {
    padding-left: var(--wf-space-12);
  }
  .wf-pl-14 {
    padding-left: var(--wf-space-14);
  }
  .wf-pl-16 {
    padding-left: var(--wf-space-16);
  }
  .wf-pl-20 {
    padding-left: var(--wf-space-20);
  }
  .wf-px-0 {
    padding-left: 0;
    padding-right: 0;
  }
  .wf-px-1 {
    padding-left: var(--wf-space-1);
    padding-right: var(--wf-space-1);
  }
  .wf-px-2 {
    padding-left: var(--wf-space-2);
    padding-right: var(--wf-space-2);
  }
  .wf-px-3 {
    padding-left: var(--wf-space-3);
    padding-right: var(--wf-space-3);
  }
  .wf-px-4 {
    padding-left: var(--wf-space-4);
    padding-right: var(--wf-space-4);
  }
  .wf-px-5 {
    padding-left: var(--wf-space-5);
    padding-right: var(--wf-space-5);
  }
  .wf-px-6 {
    padding-left: var(--wf-space-6);
    padding-right: var(--wf-space-6);
  }
  .wf-px-7 {
    padding-left: var(--wf-space-7);
    padding-right: var(--wf-space-7);
  }
  .wf-px-8 {
    padding-left: var(--wf-space-8);
    padding-right: var(--wf-space-8);
  }
  .wf-px-10 {
    padding-left: var(--wf-space-10);
    padding-right: var(--wf-space-10);
  }
  .wf-px-12 {
    padding-left: var(--wf-space-12);
    padding-right: var(--wf-space-12);
  }
  .wf-px-14 {
    padding-left: var(--wf-space-14);
    padding-right: var(--wf-space-14);
  }
  .wf-px-16 {
    padding-left: var(--wf-space-16);
    padding-right: var(--wf-space-16);
  }
  .wf-px-20 {
    padding-left: var(--wf-space-20);
    padding-right: var(--wf-space-20);
  }
  .wf-py-0 {
    padding-top: 0;
    padding-bottom: 0;
  }
  .wf-py-1 {
    padding-top: var(--wf-space-1);
    padding-bottom: var(--wf-space-1);
  }
  .wf-py-2 {
    padding-top: var(--wf-space-2);
    padding-bottom: var(--wf-space-2);
  }
  .wf-py-3 {
    padding-top: var(--wf-space-3);
    padding-bottom: var(--wf-space-3);
  }
  .wf-py-4 {
    padding-top: var(--wf-space-4);
    padding-bottom: var(--wf-space-4);
  }
  .wf-py-5 {
    padding-top: var(--wf-space-5);
    padding-bottom: var(--wf-space-5);
  }
  .wf-py-6 {
    padding-top: var(--wf-space-6);
    padding-bottom: var(--wf-space-6);
  }
  .wf-py-7 {
    padding-top: var(--wf-space-7);
    padding-bottom: var(--wf-space-7);
  }
  .wf-py-8 {
    padding-top: var(--wf-space-8);
    padding-bottom: var(--wf-space-8);
  }
  .wf-py-10 {
    padding-top: var(--wf-space-10);
    padding-bottom: var(--wf-space-10);
  }
  .wf-py-12 {
    padding-top: var(--wf-space-12);
    padding-bottom: var(--wf-space-12);
  }
  .wf-py-14 {
    padding-top: var(--wf-space-14);
    padding-bottom: var(--wf-space-14);
  }
  .wf-py-16 {
    padding-top: var(--wf-space-16);
    padding-bottom: var(--wf-space-16);
  }
  .wf-py-20 {
    padding-top: var(--wf-space-20);
    padding-bottom: var(--wf-space-20);
  }

  /* Gap */
  .wf-gap-0 {
    gap: 0;
  }
  .wf-gap-1 {
    gap: var(--wf-space-1);
  }
  .wf-gap-2 {
    gap: var(--wf-space-2);
  }
  .wf-gap-3 {
    gap: var(--wf-space-3);
  }
  .wf-gap-4 {
    gap: var(--wf-space-4);
  }
  .wf-gap-5 {
    gap: var(--wf-space-5);
  }
  .wf-gap-6 {
    gap: var(--wf-space-6);
  }
  .wf-gap-7 {
    gap: var(--wf-space-7);
  }
  .wf-gap-8 {
    gap: var(--wf-space-8);
  }
  .wf-gap-10 {
    gap: var(--wf-space-10);
  }
  .wf-gap-12 {
    gap: var(--wf-space-12);
  }
  .wf-gap-14 {
    gap: var(--wf-space-14);
  }
  .wf-gap-16 {
    gap: var(--wf-space-16);
  }
  .wf-gap-20 {
    gap: var(--wf-space-20);
  }

  /* Display */
  .wf-block {
    display: block;
  }
  .wf-inline {
    display: inline;
  }
  .wf-inline-block {
    display: inline-block;
  }
  .wf-flex {
    display: flex;
  }
  .wf-inline-flex {
    display: inline-flex;
  }
  .wf-grid {
    display: grid;
  }
  .wf-hidden {
    display: none;
  }

  /* Flex helpers */
  .wf-items-start {
    align-items: flex-start;
  }
  .wf-items-center {
    align-items: center;
  }
  .wf-items-end {
    align-items: flex-end;
  }
  .wf-items-stretch {
    align-items: stretch;
  }
  .wf-items-baseline {
    align-items: baseline;
  }
  .wf-justify-start {
    justify-content: flex-start;
  }
  .wf-justify-center {
    justify-content: center;
  }
  .wf-justify-end {
    justify-content: flex-end;
  }
  .wf-justify-between {
    justify-content: space-between;
  }
  .wf-justify-around {
    justify-content: space-around;
  }
  .wf-justify-evenly {
    justify-content: space-evenly;
  }
  .wf-flex-wrap {
    flex-wrap: wrap;
  }
  .wf-flex-nowrap {
    flex-wrap: nowrap;
  }
  .wf-flex-wrap-reverse {
    flex-wrap: wrap-reverse;
  }

  /* Grid helpers */
  .wf-grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .wf-grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .wf-grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .wf-grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .wf-grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .wf-grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  /* Text helpers */
  .wf-text-xs {
    font-size: calc(var(--wf-font-sm) - 2px);
  }
  .wf-text-sm {
    font-size: var(--wf-font-sm);
  }
  .wf-text-md {
    font-size: var(--wf-font-md);
  }
  .wf-text-lg {
    font-size: var(--wf-font-lg);
  }
  .wf-text-xl {
    font-size: var(--wf-font-xl);
  }
  .wf-text-2xl {
    font-size: 1.5rem;
  }
  .wf-text-3xl {
    font-size: 1.875rem;
  }
  .wf-text-4xl {
    font-size: 2.25rem;
  }
  .wf-nowrap {
    white-space: nowrap;
  }
  .wf-text-left {
    text-align: left;
  }
  .wf-text-center {
    text-align: center;
  }
  .wf-text-right {
    text-align: right;
  }
  .wf-text-justify {
    text-align: justify;
  }
  .wf-font-bold {
    font-weight: 700;
  }

  /* Color utilities (theme-aware) */
  .wf-text-accent {
    color: var(--wf-color-accent);
  }
  .wf-hover\:text-accent:hover {
    color: var(--wf-color-accent);
  }
  .wf-focus\:text-accent:focus-visible {
    color: var(--wf-color-accent);
  }
  .wf-active\:text-accent:active {
    color: var(--wf-color-accent);
  }
  .wf-disabled\:text-accent:disabled {
    color: var(--wf-color-accent);
  }
  .wf-text-primary {
    color: var(--wf-color-accent);
  }
  .wf-hover\:text-primary:hover {
    color: var(--wf-color-accent);
  }
  .wf-focus\:text-primary:focus-visible {
    color: var(--wf-color-accent);
  }
  .wf-active\:text-primary:active {
    color: var(--wf-color-accent);
  }
  .wf-disabled\:text-primary:disabled {
    color: var(--wf-color-accent);
  }
  .wf-text-muted {
    color: var(--wf-color-muted);
  }
  .wf-hover\:text-muted:hover {
    color: var(--wf-color-muted);
  }
  .wf-focus\:text-muted:focus-visible {
    color: var(--wf-color-muted);
  }
  .wf-active\:text-muted:active {
    color: var(--wf-color-muted);
  }
  .wf-disabled\:text-muted:disabled {
    color: var(--wf-color-muted);
  }
  .wf-text-success {
    color: var(--wf-success-text);
  }
  .wf-hover\:text-success:hover {
    color: var(--wf-success-text);
  }
  .wf-focus\:text-success:focus-visible {
    color: var(--wf-success-text);
  }
  .wf-active\:text-success:active {
    color: var(--wf-success-text);
  }
  .wf-disabled\:text-success:disabled {
    color: var(--wf-success-text);
  }
  .wf-text-warning {
    color: var(--wf-warning-text);
  }
  .wf-hover\:text-warning:hover {
    color: var(--wf-warning-text);
  }
  .wf-focus\:text-warning:focus-visible {
    color: var(--wf-warning-text);
  }
  .wf-active\:text-warning:active {
    color: var(--wf-warning-text);
  }
  .wf-disabled\:text-warning:disabled {
    color: var(--wf-warning-text);
  }
  .wf-text-danger {
    color: var(--wf-danger-text);
  }
  .wf-hover\:text-danger:hover {
    color: var(--wf-danger-text);
  }
  .wf-focus\:text-danger:focus-visible {
    color: var(--wf-danger-text);
  }
  .wf-active\:text-danger:active {
    color: var(--wf-danger-text);
  }
  .wf-disabled\:text-danger:disabled {
    color: var(--wf-danger-text);
  }
  .wf-text-info {
    color: var(--wf-info-text);
  }
  .wf-hover\:text-info:hover {
    color: var(--wf-info-text);
  }
  .wf-focus\:text-info:focus-visible {
    color: var(--wf-info-text);
  }
  .wf-active\:text-info:active {
    color: var(--wf-info-text);
  }
  .wf-disabled\:text-info:disabled {
    color: var(--wf-info-text);
  }
  .wf-text-secondary {
    color: var(--wf-secondary-text);
  }
  .wf-hover\:text-secondary:hover {
    color: var(--wf-secondary-text);
  }
  .wf-focus\:text-secondary:focus-visible {
    color: var(--wf-secondary-text);
  }
  .wf-active\:text-secondary:active {
    color: var(--wf-secondary-text);
  }
  .wf-disabled\:text-secondary:disabled {
    color: var(--wf-secondary-text);
  }
  .wf-text-link {
    color: var(--wf-link-color);
  }
  .wf-hover\:text-link:hover {
    color: var(--wf-link-color);
  }
  .wf-focus\:text-link:focus-visible {
    color: var(--wf-link-color);
  }
  .wf-active\:text-link:active {
    color: var(--wf-link-color);
  }
  .wf-disabled\:text-link:disabled {
    color: var(--wf-link-color);
  }
  .wf-text-white {
    color: #ffffff;
  }
  .wf-hover\:text-white:hover {
    color: #ffffff;
  }
  .wf-focus\:text-white:focus-visible {
    color: #ffffff;
  }
  .wf-active\:text-white:active {
    color: #ffffff;
  }
  .wf-disabled\:text-white:disabled {
    color: #ffffff;
  }
  .wf-text-black {
    color: #000000;
  }
  .wf-hover\:text-black:hover {
    color: #000000;
  }
  .wf-focus\:text-black:focus-visible {
    color: #000000;
  }
  .wf-active\:text-black:active {
    color: #000000;
  }
  .wf-disabled\:text-black:disabled {
    color: #000000;
  }
  .wf-bg-accent {
    background-color: var(--wf-color-accent);
  }
  .wf-hover\:bg-accent:hover {
    background-color: var(--wf-color-accent);
  }
  .wf-focus\:bg-accent:focus-visible {
    background-color: var(--wf-color-accent);
  }
  .wf-active\:bg-accent:active {
    background-color: var(--wf-color-accent);
  }
  .wf-disabled\:bg-accent:disabled {
    background-color: var(--wf-color-accent);
  }
  .wf-bg-primary {
    background-color: var(--wf-primary-bg);
  }
  .wf-hover\:bg-primary:hover {
    background-color: var(--wf-primary-bg);
  }
  .wf-focus\:bg-primary:focus-visible {
    background-color: var(--wf-primary-bg);
  }
  .wf-active\:bg-primary:active {
    background-color: var(--wf-primary-bg);
  }
  .wf-disabled\:bg-primary:disabled {
    background-color: var(--wf-primary-bg);
  }
  .wf-bg-surface {
    background-color: var(--wf-surface-base);
  }
  .wf-hover\:bg-surface:hover {
    background-color: var(--wf-surface-base);
  }
  .wf-focus\:bg-surface:focus-visible {
    background-color: var(--wf-surface-base);
  }
  .wf-active\:bg-surface:active {
    background-color: var(--wf-surface-base);
  }
  .wf-disabled\:bg-surface:disabled {
    background-color: var(--wf-surface-base);
  }
  .wf-bg-surface-subtle {
    background-color: var(--wf-surface-subtle);
  }
  .wf-hover\:bg-surface-subtle:hover {
    background-color: var(--wf-surface-subtle);
  }
  .wf-focus\:bg-surface-subtle:focus-visible {
    background-color: var(--wf-surface-subtle);
  }
  .wf-active\:bg-surface-subtle:active {
    background-color: var(--wf-surface-subtle);
  }
  .wf-disabled\:bg-surface-subtle:disabled {
    background-color: var(--wf-surface-subtle);
  }
  .wf-bg-surface-muted {
    background-color: var(--wf-surface-muted);
  }
  .wf-hover\:bg-surface-muted:hover {
    background-color: var(--wf-surface-muted);
  }
  .wf-focus\:bg-surface-muted:focus-visible {
    background-color: var(--wf-surface-muted);
  }
  .wf-active\:bg-surface-muted:active {
    background-color: var(--wf-surface-muted);
  }
  .wf-disabled\:bg-surface-muted:disabled {
    background-color: var(--wf-surface-muted);
  }
  .wf-bg-success {
    background-color: var(--wf-success);
  }
  .wf-hover\:bg-success:hover {
    background-color: var(--wf-success);
  }
  .wf-focus\:bg-success:focus-visible {
    background-color: var(--wf-success);
  }
  .wf-active\:bg-success:active {
    background-color: var(--wf-success);
  }
  .wf-disabled\:bg-success:disabled {
    background-color: var(--wf-success);
  }
  .wf-bg-warning {
    background-color: var(--wf-warning);
  }
  .wf-hover\:bg-warning:hover {
    background-color: var(--wf-warning);
  }
  .wf-focus\:bg-warning:focus-visible {
    background-color: var(--wf-warning);
  }
  .wf-active\:bg-warning:active {
    background-color: var(--wf-warning);
  }
  .wf-disabled\:bg-warning:disabled {
    background-color: var(--wf-warning);
  }
  .wf-bg-danger {
    background-color: var(--wf-danger);
  }
  .wf-hover\:bg-danger:hover {
    background-color: var(--wf-danger);
  }
  .wf-focus\:bg-danger:focus-visible {
    background-color: var(--wf-danger);
  }
  .wf-active\:bg-danger:active {
    background-color: var(--wf-danger);
  }
  .wf-disabled\:bg-danger:disabled {
    background-color: var(--wf-danger);
  }
  .wf-bg-white {
    background-color: #ffffff;
  }
  .wf-hover\:bg-white:hover {
    background-color: #ffffff;
  }
  .wf-focus\:bg-white:focus-visible {
    background-color: #ffffff;
  }
  .wf-active\:bg-white:active {
    background-color: #ffffff;
  }
  .wf-disabled\:bg-white:disabled {
    background-color: #ffffff;
  }
  .wf-bg-black {
    background-color: #000000;
  }
  .wf-hover\:bg-black:hover {
    background-color: #000000;
  }
  .wf-focus\:bg-black:focus-visible {
    background-color: #000000;
  }
  .wf-active\:bg-black:active {
    background-color: #000000;
  }
  .wf-disabled\:bg-black:disabled {
    background-color: #000000;
  }
  .wf-bg-transparent {
    background-color: transparent;
  }
  .wf-hover\:bg-transparent:hover {
    background-color: transparent;
  }
  .wf-focus\:bg-transparent:focus-visible {
    background-color: transparent;
  }
  .wf-active\:bg-transparent:active {
    background-color: transparent;
  }
  .wf-disabled\:bg-transparent:disabled {
    background-color: transparent;
  }
  .wf-border-accent {
    border-color: var(--wf-color-accent);
  }
  .wf-hover\:border-accent:hover {
    border-color: var(--wf-color-accent);
  }
  .wf-focus\:border-accent:focus-visible {
    border-color: var(--wf-color-accent);
  }
  .wf-active\:border-accent:active {
    border-color: var(--wf-color-accent);
  }
  .wf-disabled\:border-accent:disabled {
    border-color: var(--wf-color-accent);
  }
  .wf-border-primary {
    border-color: var(--wf-primary-bg);
  }
  .wf-hover\:border-primary:hover {
    border-color: var(--wf-primary-bg);
  }
  .wf-focus\:border-primary:focus-visible {
    border-color: var(--wf-primary-bg);
  }
  .wf-active\:border-primary:active {
    border-color: var(--wf-primary-bg);
  }
  .wf-disabled\:border-primary:disabled {
    border-color: var(--wf-primary-bg);
  }
  .wf-border-subtle {
    border-color: var(--wf-color-border-subtle);
  }
  .wf-hover\:border-subtle:hover {
    border-color: var(--wf-color-border-subtle);
  }
  .wf-focus\:border-subtle:focus-visible {
    border-color: var(--wf-color-border-subtle);
  }
  .wf-active\:border-subtle:active {
    border-color: var(--wf-color-border-subtle);
  }
  .wf-disabled\:border-subtle:disabled {
    border-color: var(--wf-color-border-subtle);
  }
  .wf-border-strong {
    border-color: var(--wf-color-border-strong);
  }
  .wf-hover\:border-strong:hover {
    border-color: var(--wf-color-border-strong);
  }
  .wf-focus\:border-strong:focus-visible {
    border-color: var(--wf-color-border-strong);
  }
  .wf-active\:border-strong:active {
    border-color: var(--wf-color-border-strong);
  }
  .wf-disabled\:border-strong:disabled {
    border-color: var(--wf-color-border-strong);
  }
  .wf-border {
    border-color: var(--wf-color-border);
  }
  .wf-hover\:border:hover {
    border-color: var(--wf-color-border);
  }
  .wf-focus\:border:focus-visible {
    border-color: var(--wf-color-border);
  }
  .wf-active\:border:active {
    border-color: var(--wf-color-border);
  }
  .wf-disabled\:border:disabled {
    border-color: var(--wf-color-border);
  }
  .wf-border-transparent {
    border-color: transparent;
  }
  .wf-hover\:border-transparent:hover {
    border-color: transparent;
  }
  .wf-focus\:border-transparent:focus-visible {
    border-color: transparent;
  }
  .wf-active\:border-transparent:active {
    border-color: transparent;
  }
  .wf-disabled\:border-transparent:disabled {
    border-color: transparent;
  }
  .wf-ring-accent {
    --wf-ring-color: var(--wf-color-accent);
  }
  .wf-outline-accent {
    outline-color: var(--wf-color-accent);
  }
  .wf-ring-primary {
    --wf-ring-color: var(--wf-primary-bg);
  }
  .wf-outline-primary {
    outline-color: var(--wf-primary-bg);
  }
  .wf-ring-subtle {
    --wf-ring-color: var(--wf-color-border-subtle);
  }
  .wf-outline-subtle {
    outline-color: var(--wf-color-border-subtle);
  }
  .wf-ring-strong {
    --wf-ring-color: var(--wf-color-border-strong);
  }
  .wf-outline-strong {
    outline-color: var(--wf-color-border-strong);
  }
  .wf-ring-DEFAULT {
    --wf-ring-color: var(--wf-color-border);
  }
  .wf-outline-DEFAULT {
    outline-color: var(--wf-color-border);
  }
  .wf-ring-transparent {
    --wf-ring-color: transparent;
  }
  .wf-outline-transparent {
    outline-color: transparent;
  }

  /* Border utilities (Core) */
  .wf-border-0 {
    border-width: 0;
    border-style: none;
  }
  .wf-border {
    border-width: 1px;
    border-style: solid;
  }
  .wf-border-2 {
    border-width: 2px;
    border-style: solid;
  }
  .wf-border-4 {
    border-width: 4px;
    border-style: solid;
  }
  .wf-border-8 {
    border-width: 8px;
    border-style: solid;
  }
  .wf-rounded-none {
    border-radius: 0;
  }
  .wf-rounded-sm {
    border-radius: var(--wf-radius-sm);
  }
  .wf-rounded-md {
    border-radius: var(--wf-radius-md);
  }
  .wf-rounded-lg {
    border-radius: var(--wf-radius-lg);
  }
  .wf-rounded-full {
    border-radius: var(--wf-radius-full);
  }
  .wf-rounded {
    border-radius: var(--wf-radius-md);
  }

  /* Sizing utilities (Core) */
  .wf-w-full {
    width: 100%;
  }
  .wf-w-screen {
    width: 100vw;
  }
  .wf-w-1\/2 {
    width: 50%;
  }
  .wf-w-1\/3 {
    width: 33.33333333333333%;
  }
  .wf-w-2\/3 {
    width: 66.66666666666666%;
  }
  .wf-w-1\/4 {
    width: 25%;
  }
  .wf-w-0 {
    width: 0;
  }
  .wf-h-0 {
    height: 0;
  }
  .wf-w-1 {
    width: 4px;
  }
  .wf-h-1 {
    height: 4px;
  }
  .wf-w-2 {
    width: 8px;
  }
  .wf-h-2 {
    height: 8px;
  }
  .wf-w-4 {
    width: 16px;
  }
  .wf-h-4 {
    height: 16px;
  }
  .wf-w-8 {
    width: 32px;
  }
  .wf-h-8 {
    height: 32px;
  }
  .wf-w-16 {
    width: 64px;
  }
  .wf-h-16 {
    height: 64px;
  }
  .wf-w-32 {
    width: 128px;
  }
  .wf-h-32 {
    height: 128px;
  }

  /* Shadow utilities */
  .wf-shadow-sm {
    box-shadow: var(--wf-shadow-sm);
  }
  .wf-shadow-md {
    box-shadow: var(--wf-shadow-md);
  }
  .wf-shadow-lg {
    box-shadow: var(--wf-shadow-lg);
  }
  .wf-shadow-xl {
    box-shadow: var(--wf-shadow-xl);
  }
  .wf-shadow-none {
    box-shadow: none;
  }
  .wf-hover\:shadow-sm:hover {
    box-shadow: var(--wf-shadow-sm);
  }
  .wf-focus\:shadow-sm:focus-visible {
    box-shadow: var(--wf-shadow-sm);
  }
  .wf-active\:shadow-sm:active {
    box-shadow: var(--wf-shadow-sm);
  }
  .wf-hover\:shadow-md:hover {
    box-shadow: var(--wf-shadow-md);
  }
  .wf-focus\:shadow-md:focus-visible {
    box-shadow: var(--wf-shadow-md);
  }
  .wf-active\:shadow-md:active {
    box-shadow: var(--wf-shadow-md);
  }
  .wf-hover\:shadow-lg:hover {
    box-shadow: var(--wf-shadow-lg);
  }
  .wf-focus\:shadow-lg:focus-visible {
    box-shadow: var(--wf-shadow-lg);
  }
  .wf-active\:shadow-lg:active {
    box-shadow: var(--wf-shadow-lg);
  }
  .wf-hover\:shadow-xl:hover {
    box-shadow: var(--wf-shadow-xl);
  }
  .wf-focus\:shadow-xl:focus-visible {
    box-shadow: var(--wf-shadow-xl);
  }
  .wf-active\:shadow-xl:active {
    box-shadow: var(--wf-shadow-xl);
  }
  .wf-hover\:shadow-none:hover {
    box-shadow: none;
  }
  .wf-focus\:shadow-none:focus-visible {
    box-shadow: none;
  }
  .wf-active\:shadow-none:active {
    box-shadow: none;
  }

  /* Accessibility */
  .wf-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    clip-path: inset(50%);
  }

  /* Size helpers (Legacy & Static) */
  .wf-w-100 {
    width: 100%;
  }
  .wf-max-w-sm {
    max-width: 480px;
  }
  .wf-max-w-md {
    max-width: 720px;
  }
  .wf-max-w-lg {
    max-width: 960px;
  }
  .wf-max-w-xl {
    max-width: 1200px;
  }
  .wf-container-fluid {
    max-width: none !important;
  }
  .wf-h-100 {
    height: 100%;
  }
  .wf-min-h-screen {
    min-height: 100vh;
  }

  /* Overflow */
  .wf-overflow-hidden {
    overflow: hidden;
  }
  .wf-overflow-auto {
    overflow: auto;
  }
  .wf-overflow-scroll {
    overflow: scroll;
  }

  /* Position */
  .wf-relative {
    position: relative;
  }
  .wf-absolute {
    position: absolute;
  }
  .wf-fixed {
    position: fixed;
  }
  .wf-sticky {
    position: sticky;
  }

  /* Z-index (small scale) */
  .wf-z-0 {
    z-index: 0;
  }
  .wf-z-10 {
    z-index: 10;
  }
  .wf-z-100 {
    z-index: 100;
  }
  .wf-z-1000 {
    z-index: 1000;
  }

  /* Visibility */
  .wf-visible {
    visibility: visible;
  }
  .wf-invisible {
    visibility: hidden;
  }

  /* Link helper */
  .wf-link {
    color: var(--wf-link-color);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    cursor: pointer;
  }
  .wf-link:hover,
  .wf-link:focus-visible {
    color: var(--wf-link-color-hover);
    border-bottom-color: currentColor;
  }

  /* Text handling */
  .wf-text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .wf-text-break {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .wf-line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .wf-line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Cursor */
  .wf-cursor-pointer {
    cursor: pointer;
  }
  .wf-cursor-not-allowed {
    cursor: not-allowed;
  }
  .wf-cursor-wait {
    cursor: wait;
  }
  .wf-cursor-grab {
    cursor: grab;
  }

  /* Transitions */
  .wf-transition {
    transition: all var(--wf-duration-fast) var(--wf-ease-out);
  }
  .wf-transition-colors {
    transition:
      color var(--wf-duration-fast) var(--wf-ease-out),
      background-color var(--wf-duration-fast) var(--wf-ease-out),
      border-color var(--wf-duration-fast) var(--wf-ease-out);
  }

  @media (prefers-reduced-motion: reduce) {
    .wf-transition,
    .wf-transition-colors {
      transition: none !important;
    }
  }

  /* Responsive (min-width) */
  @media (min-width: 600px) {
    .wf-sm-hidden {
      display: none;
    }
    .wf-sm-flex {
      display: flex;
    }
    .wf-sm-grid {
      display: grid;
    }
    .wf-sm-inline-flex {
      display: inline-flex;
    }
    .wf-sm-block {
      display: block;
    }
    .wf-sm-inline {
      display: inline;
    }
    .wf-sm-inline-block {
      display: inline-block;
    }
    .wf-sm-justify-start {
      justify-content: flex-start;
    }
    .wf-sm-justify-center {
      justify-content: center;
    }
    .wf-sm-justify-end {
      justify-content: flex-end;
    }
    .wf-sm-justify-between {
      justify-content: space-between;
    }
    .wf-sm-items-start {
      align-items: flex-start;
    }
    .wf-sm-items-center {
      align-items: center;
    }
    .wf-sm-items-end {
      align-items: flex-end;
    }
    .wf-sm-text-left {
      text-align: left;
    }
    .wf-sm-text-center {
      text-align: center;
    }
    .wf-sm-text-right {
      text-align: right;
    }
    .wf-sm-text-justify {
      text-align: justify;
    }
    .wf-sm-w-full {
      width: 100%;
    }
    .wf-sm-w-1\/2 {
      width: 50%;
    }
    .wf-sm-w-1\/3 {
      width: 33.33333333333333%;
    }
    .wf-sm-w-2\/3 {
      width: 66.66666666666666%;
    }
    .wf-sm-w-1\/4 {
      width: 25%;
    }
  }
  @media (min-width: 900px) {
    .wf-md-hidden {
      display: none;
    }
    .wf-md-flex {
      display: flex;
    }
    .wf-md-grid {
      display: grid;
    }
    .wf-md-inline-flex {
      display: inline-flex;
    }
    .wf-md-block {
      display: block;
    }
    .wf-md-inline {
      display: inline;
    }
    .wf-md-inline-block {
      display: inline-block;
    }
    .wf-md-justify-start {
      justify-content: flex-start;
    }
    .wf-md-justify-center {
      justify-content: center;
    }
    .wf-md-justify-end {
      justify-content: flex-end;
    }
    .wf-md-justify-between {
      justify-content: space-between;
    }
    .wf-md-items-start {
      align-items: flex-start;
    }
    .wf-md-items-center {
      align-items: center;
    }
    .wf-md-items-end {
      align-items: flex-end;
    }
    .wf-md-text-left {
      text-align: left;
    }
    .wf-md-text-center {
      text-align: center;
    }
    .wf-md-text-right {
      text-align: right;
    }
    .wf-md-text-justify {
      text-align: justify;
    }
    .wf-md-w-full {
      width: 100%;
    }
    .wf-md-w-1\/2 {
      width: 50%;
    }
    .wf-md-w-1\/3 {
      width: 33.33333333333333%;
    }
    .wf-md-w-2\/3 {
      width: 66.66666666666666%;
    }
    .wf-md-w-1\/4 {
      width: 25%;
    }
  }
  @media (min-width: 1200px) {
    .wf-lg-hidden {
      display: none;
    }
    .wf-lg-flex {
      display: flex;
    }
    .wf-lg-grid {
      display: grid;
    }
    .wf-lg-inline-flex {
      display: inline-flex;
    }
    .wf-lg-block {
      display: block;
    }
    .wf-lg-inline {
      display: inline;
    }
    .wf-lg-inline-block {
      display: inline-block;
    }
    .wf-lg-justify-start {
      justify-content: flex-start;
    }
    .wf-lg-justify-center {
      justify-content: center;
    }
    .wf-lg-justify-end {
      justify-content: flex-end;
    }
    .wf-lg-justify-between {
      justify-content: space-between;
    }
    .wf-lg-items-start {
      align-items: flex-start;
    }
    .wf-lg-items-center {
      align-items: center;
    }
    .wf-lg-items-end {
      align-items: flex-end;
    }
    .wf-lg-text-left {
      text-align: left;
    }
    .wf-lg-text-center {
      text-align: center;
    }
    .wf-lg-text-right {
      text-align: right;
    }
    .wf-lg-text-justify {
      text-align: justify;
    }
    .wf-lg-w-full {
      width: 100%;
    }
    .wf-lg-w-1\/2 {
      width: 50%;
    }
    .wf-lg-w-1\/3 {
      width: 33.33333333333333%;
    }
    .wf-lg-w-2\/3 {
      width: 66.66666666666666%;
    }
    .wf-lg-w-1\/4 {
      width: 25%;
    }
  }
  @media (min-width: 1440px) {
    .wf-xl-hidden {
      display: none;
    }
    .wf-xl-flex {
      display: flex;
    }
    .wf-xl-grid {
      display: grid;
    }
    .wf-xl-inline-flex {
      display: inline-flex;
    }
    .wf-xl-block {
      display: block;
    }
    .wf-xl-inline {
      display: inline;
    }
    .wf-xl-inline-block {
      display: inline-block;
    }
    .wf-xl-justify-start {
      justify-content: flex-start;
    }
    .wf-xl-justify-center {
      justify-content: center;
    }
    .wf-xl-justify-end {
      justify-content: flex-end;
    }
    .wf-xl-justify-between {
      justify-content: space-between;
    }
    .wf-xl-items-start {
      align-items: flex-start;
    }
    .wf-xl-items-center {
      align-items: center;
    }
    .wf-xl-items-end {
      align-items: flex-end;
    }
    .wf-xl-text-left {
      text-align: left;
    }
    .wf-xl-text-center {
      text-align: center;
    }
    .wf-xl-text-right {
      text-align: right;
    }
    .wf-xl-text-justify {
      text-align: justify;
    }
    .wf-xl-w-full {
      width: 100%;
    }
    .wf-xl-w-1\/2 {
      width: 50%;
    }
    .wf-xl-w-1\/3 {
      width: 33.33333333333333%;
    }
    .wf-xl-w-2\/3 {
      width: 66.66666666666666%;
    }
    .wf-xl-w-1\/4 {
      width: 25%;
    }
  }

  /* Logical Properties (v2.0.0) - RTL-aware spacing utilities */
  /* Margin Inline (horizontal in LTR, adapts for RTL) */
  .wf-mi-0 {
    margin-inline: 0;
  }
  .wf-mi-1 {
    margin-inline: var(--wf-space-1);
  }
  .wf-mi-2 {
    margin-inline: var(--wf-space-2);
  }
  .wf-mi-3 {
    margin-inline: var(--wf-space-3);
  }
  .wf-mi-4 {
    margin-inline: var(--wf-space-4);
  }
  .wf-mi-5 {
    margin-inline: var(--wf-space-5);
  }
  .wf-mi-6 {
    margin-inline: var(--wf-space-6);
  }
  .wf-mi-7 {
    margin-inline: var(--wf-space-7);
  }
  .wf-mi-8 {
    margin-inline: var(--wf-space-8);
  }
  .wf-mi-10 {
    margin-inline: var(--wf-space-10);
  }
  .wf-mi-12 {
    margin-inline: var(--wf-space-12);
  }
  .wf-mi-14 {
    margin-inline: var(--wf-space-14);
  }
  .wf-mi-16 {
    margin-inline: var(--wf-space-16);
  }
  .wf-mi-20 {
    margin-inline: var(--wf-space-20);
  }

  /* Margin Block (vertical) */
  .wf-mb-0 {
    margin-block: 0;
  }
  .wf-mb-1 {
    margin-block: var(--wf-space-1);
  }
  .wf-mb-2 {
    margin-block: var(--wf-space-2);
  }
  .wf-mb-3 {
    margin-block: var(--wf-space-3);
  }
  .wf-mb-4 {
    margin-block: var(--wf-space-4);
  }
  .wf-mb-5 {
    margin-block: var(--wf-space-5);
  }
  .wf-mb-6 {
    margin-block: var(--wf-space-6);
  }
  .wf-mb-7 {
    margin-block: var(--wf-space-7);
  }
  .wf-mb-8 {
    margin-block: var(--wf-space-8);
  }
  .wf-mb-10 {
    margin-block: var(--wf-space-10);
  }
  .wf-mb-12 {
    margin-block: var(--wf-space-12);
  }
  .wf-mb-14 {
    margin-block: var(--wf-space-14);
  }
  .wf-mb-16 {
    margin-block: var(--wf-space-16);
  }
  .wf-mb-20 {
    margin-block: var(--wf-space-20);
  }

  /* Margin Inline Start (left in LTR, right in RTL) */
  .wf-mis-0 {
    margin-inline-start: 0;
  }
  .wf-mis-1 {
    margin-inline-start: var(--wf-space-1);
  }
  .wf-mis-2 {
    margin-inline-start: var(--wf-space-2);
  }
  .wf-mis-3 {
    margin-inline-start: var(--wf-space-3);
  }
  .wf-mis-4 {
    margin-inline-start: var(--wf-space-4);
  }
  .wf-mis-5 {
    margin-inline-start: var(--wf-space-5);
  }
  .wf-mis-6 {
    margin-inline-start: var(--wf-space-6);
  }
  .wf-mis-7 {
    margin-inline-start: var(--wf-space-7);
  }
  .wf-mis-8 {
    margin-inline-start: var(--wf-space-8);
  }
  .wf-mis-10 {
    margin-inline-start: var(--wf-space-10);
  }
  .wf-mis-12 {
    margin-inline-start: var(--wf-space-12);
  }
  .wf-mis-14 {
    margin-inline-start: var(--wf-space-14);
  }
  .wf-mis-16 {
    margin-inline-start: var(--wf-space-16);
  }
  .wf-mis-20 {
    margin-inline-start: var(--wf-space-20);
  }

  /* Margin Inline End (right in LTR, left in RTL) */
  .wf-mie-0 {
    margin-inline-end: 0;
  }
  .wf-mie-1 {
    margin-inline-end: var(--wf-space-1);
  }
  .wf-mie-2 {
    margin-inline-end: var(--wf-space-2);
  }
  .wf-mie-3 {
    margin-inline-end: var(--wf-space-3);
  }
  .wf-mie-4 {
    margin-inline-end: var(--wf-space-4);
  }
  .wf-mie-5 {
    margin-inline-end: var(--wf-space-5);
  }
  .wf-mie-6 {
    margin-inline-end: var(--wf-space-6);
  }
  .wf-mie-7 {
    margin-inline-end: var(--wf-space-7);
  }
  .wf-mie-8 {
    margin-inline-end: var(--wf-space-8);
  }
  .wf-mie-10 {
    margin-inline-end: var(--wf-space-10);
  }
  .wf-mie-12 {
    margin-inline-end: var(--wf-space-12);
  }
  .wf-mie-14 {
    margin-inline-end: var(--wf-space-14);
  }
  .wf-mie-16 {
    margin-inline-end: var(--wf-space-16);
  }
  .wf-mie-20 {
    margin-inline-end: var(--wf-space-20);
  }

  /* Padding Inline (horizontal in LTR, adapts for RTL) */
  .wf-pi-0 {
    padding-inline: 0;
  }
  .wf-pi-1 {
    padding-inline: var(--wf-space-1);
  }
  .wf-pi-2 {
    padding-inline: var(--wf-space-2);
  }
  .wf-pi-3 {
    padding-inline: var(--wf-space-3);
  }
  .wf-pi-4 {
    padding-inline: var(--wf-space-4);
  }
  .wf-pi-5 {
    padding-inline: var(--wf-space-5);
  }
  .wf-pi-6 {
    padding-inline: var(--wf-space-6);
  }
  .wf-pi-7 {
    padding-inline: var(--wf-space-7);
  }
  .wf-pi-8 {
    padding-inline: var(--wf-space-8);
  }
  .wf-pi-10 {
    padding-inline: var(--wf-space-10);
  }
  .wf-pi-12 {
    padding-inline: var(--wf-space-12);
  }
  .wf-pi-14 {
    padding-inline: var(--wf-space-14);
  }
  .wf-pi-16 {
    padding-inline: var(--wf-space-16);
  }
  .wf-pi-20 {
    padding-inline: var(--wf-space-20);
  }

  /* Padding Block (vertical) */
  .wf-pb-0 {
    padding-block: 0;
  }
  .wf-pb-1 {
    padding-block: var(--wf-space-1);
  }
  .wf-pb-2 {
    padding-block: var(--wf-space-2);
  }
  .wf-pb-3 {
    padding-block: var(--wf-space-3);
  }
  .wf-pb-4 {
    padding-block: var(--wf-space-4);
  }
  .wf-pb-5 {
    padding-block: var(--wf-space-5);
  }
  .wf-pb-6 {
    padding-block: var(--wf-space-6);
  }
  .wf-pb-7 {
    padding-block: var(--wf-space-7);
  }
  .wf-pb-8 {
    padding-block: var(--wf-space-8);
  }
  .wf-pb-10 {
    padding-block: var(--wf-space-10);
  }
  .wf-pb-12 {
    padding-block: var(--wf-space-12);
  }
  .wf-pb-14 {
    padding-block: var(--wf-space-14);
  }
  .wf-pb-16 {
    padding-block: var(--wf-space-16);
  }
  .wf-pb-20 {
    padding-block: var(--wf-space-20);
  }

  /* Padding Inline Start (left in LTR, right in RTL) */
  .wf-pis-0 {
    padding-inline-start: 0;
  }
  .wf-pis-1 {
    padding-inline-start: var(--wf-space-1);
  }
  .wf-pis-2 {
    padding-inline-start: var(--wf-space-2);
  }
  .wf-pis-3 {
    padding-inline-start: var(--wf-space-3);
  }
  .wf-pis-4 {
    padding-inline-start: var(--wf-space-4);
  }
  .wf-pis-5 {
    padding-inline-start: var(--wf-space-5);
  }
  .wf-pis-6 {
    padding-inline-start: var(--wf-space-6);
  }
  .wf-pis-7 {
    padding-inline-start: var(--wf-space-7);
  }
  .wf-pis-8 {
    padding-inline-start: var(--wf-space-8);
  }
  .wf-pis-10 {
    padding-inline-start: var(--wf-space-10);
  }
  .wf-pis-12 {
    padding-inline-start: var(--wf-space-12);
  }
  .wf-pis-14 {
    padding-inline-start: var(--wf-space-14);
  }
  .wf-pis-16 {
    padding-inline-start: var(--wf-space-16);
  }
  .wf-pis-20 {
    padding-inline-start: var(--wf-space-20);
  }

  /* Padding Inline End (right in LTR, left in RTL) */
  .wf-pie-0 {
    padding-inline-end: 0;
  }
  .wf-pie-1 {
    padding-inline-end: var(--wf-space-1);
  }
  .wf-pie-2 {
    padding-inline-end: var(--wf-space-2);
  }
  .wf-pie-3 {
    padding-inline-end: var(--wf-space-3);
  }
  .wf-pie-4 {
    padding-inline-end: var(--wf-space-4);
  }
  .wf-pie-5 {
    padding-inline-end: var(--wf-space-5);
  }
  .wf-pie-6 {
    padding-inline-end: var(--wf-space-6);
  }
  .wf-pie-7 {
    padding-inline-end: var(--wf-space-7);
  }
  .wf-pie-8 {
    padding-inline-end: var(--wf-space-8);
  }
  .wf-pie-10 {
    padding-inline-end: var(--wf-space-10);
  }
  .wf-pie-12 {
    padding-inline-end: var(--wf-space-12);
  }
  .wf-pie-14 {
    padding-inline-end: var(--wf-space-14);
  }
  .wf-pie-16 {
    padding-inline-end: var(--wf-space-16);
  }
  .wf-pie-20 {
    padding-inline-end: var(--wf-space-20);
  }
}
@layer utilities {
  /* Extras Utilities */

  /* Border utilities (Extras) */
  .wf-border-t-1 {
    border-top-width: 1px;
    border-top-style: solid;
  }
  .wf-border-r-1 {
    border-right-width: 1px;
    border-right-style: solid;
  }
  .wf-border-b-1 {
    border-bottom-width: 1px;
    border-bottom-style: solid;
  }
  .wf-border-l-1 {
    border-left-width: 1px;
    border-left-style: solid;
  }
  .wf-border-t-2 {
    border-top-width: 2px;
    border-top-style: solid;
  }
  .wf-border-r-2 {
    border-right-width: 2px;
    border-right-style: solid;
  }
  .wf-border-b-2 {
    border-bottom-width: 2px;
    border-bottom-style: solid;
  }
  .wf-border-l-2 {
    border-left-width: 2px;
    border-left-style: solid;
  }
  .wf-border-t-4 {
    border-top-width: 4px;
    border-top-style: solid;
  }
  .wf-border-r-4 {
    border-right-width: 4px;
    border-right-style: solid;
  }
  .wf-border-b-4 {
    border-bottom-width: 4px;
    border-bottom-style: solid;
  }
  .wf-border-l-4 {
    border-left-width: 4px;
    border-left-style: solid;
  }
  .wf-border-t-8 {
    border-top-width: 8px;
    border-top-style: solid;
  }
  .wf-border-r-8 {
    border-right-width: 8px;
    border-right-style: solid;
  }
  .wf-border-b-8 {
    border-bottom-width: 8px;
    border-bottom-style: solid;
  }
  .wf-border-l-8 {
    border-left-width: 8px;
    border-left-style: solid;
  }
  .wf-rounded-t-sm {
    border-top-left-radius: var(--wf-radius-sm);
    border-top-right-radius: var(--wf-radius-sm);
  }
  .wf-rounded-r-sm {
    border-top-right-radius: var(--wf-radius-sm);
    border-bottom-right-radius: var(--wf-radius-sm);
  }
  .wf-rounded-b-sm {
    border-bottom-right-radius: var(--wf-radius-sm);
    border-bottom-left-radius: var(--wf-radius-sm);
  }
  .wf-rounded-l-sm {
    border-bottom-left-radius: var(--wf-radius-sm);
    border-top-left-radius: var(--wf-radius-sm);
  }
  .wf-rounded-t-md {
    border-top-left-radius: var(--wf-radius-md);
    border-top-right-radius: var(--wf-radius-md);
  }
  .wf-rounded-r-md {
    border-top-right-radius: var(--wf-radius-md);
    border-bottom-right-radius: var(--wf-radius-md);
  }
  .wf-rounded-b-md {
    border-bottom-right-radius: var(--wf-radius-md);
    border-bottom-left-radius: var(--wf-radius-md);
  }
  .wf-rounded-l-md {
    border-bottom-left-radius: var(--wf-radius-md);
    border-top-left-radius: var(--wf-radius-md);
  }
  .wf-rounded-t-lg {
    border-top-left-radius: var(--wf-radius-lg);
    border-top-right-radius: var(--wf-radius-lg);
  }
  .wf-rounded-r-lg {
    border-top-right-radius: var(--wf-radius-lg);
    border-bottom-right-radius: var(--wf-radius-lg);
  }
  .wf-rounded-b-lg {
    border-bottom-right-radius: var(--wf-radius-lg);
    border-bottom-left-radius: var(--wf-radius-lg);
  }
  .wf-rounded-l-lg {
    border-bottom-left-radius: var(--wf-radius-lg);
    border-top-left-radius: var(--wf-radius-lg);
  }
  .wf-rounded-t-full {
    border-top-left-radius: var(--wf-radius-full);
    border-top-right-radius: var(--wf-radius-full);
  }
  .wf-rounded-r-full {
    border-top-right-radius: var(--wf-radius-full);
    border-bottom-right-radius: var(--wf-radius-full);
  }
  .wf-rounded-b-full {
    border-bottom-right-radius: var(--wf-radius-full);
    border-bottom-left-radius: var(--wf-radius-full);
  }
  .wf-rounded-l-full {
    border-bottom-left-radius: var(--wf-radius-full);
    border-top-left-radius: var(--wf-radius-full);
  }
  .wf-disabled\:border-transparent:disabled {
    border-color: transparent;
  }

  /* Sizing utilities (Extras) */
  .wf-w-2\/4 {
    width: 50%;
  }
  .wf-w-3\/4 {
    width: 75%;
  }
  .wf-w-auto {
    width: auto;
  }
  .wf-h-1\/2 {
    height: 50%;
  }
  .wf-h-1\/3 {
    height: 33.33333333333333%;
  }
  .wf-h-2\/3 {
    height: 66.66666666666666%;
  }
  .wf-h-1\/4 {
    height: 25%;
  }
  .wf-h-2\/4 {
    height: 50%;
  }
  .wf-h-3\/4 {
    height: 75%;
  }
  .wf-h-full {
    height: 100%;
  }
  .wf-h-screen {
    height: 100vh;
  }
  .wf-h-auto {
    height: auto;
  }
  .wf-w-12 {
    width: 48px;
  }
  .wf-h-12 {
    height: 48px;
  }
  .wf-w-24 {
    width: 96px;
  }
  .wf-h-24 {
    height: 96px;
  }
  .wf-w-48 {
    width: 192px;
  }
  .wf-h-48 {
    height: 192px;
  }
  .wf-w-64 {
    width: 256px;
  }
  .wf-h-64 {
    height: 256px;
  }
  .wf-w-96 {
    width: 384px;
  }
  .wf-h-96 {
    height: 384px;
  }
  .wf-min-w-0 {
    min-width: 0px;
  }
  .wf-max-w-0 {
    max-width: 0px;
  }
  .wf-min-h-0 {
    min-height: 0px;
  }
  .wf-max-h-0 {
    max-height: 0px;
  }
  .wf-min-w-full {
    min-width: 100%;
  }
  .wf-max-w-full {
    max-width: 100%;
  }
  .wf-min-h-full {
    min-height: 100%;
  }
  .wf-max-h-full {
    max-height: 100%;
  }
  .wf-min-w-screen {
    min-width: 100vw;
  }
  .wf-min-h-screen {
    min-height: 100vh;
  }
  .wf-max-w-screen {
    max-width: 100vw;
  }
  .wf-max-h-screen {
    max-height: 100vh;
  }
  .wf-min-w-min {
    min-width: min-content;
  }
  .wf-max-w-min {
    max-width: min-content;
  }
  .wf-min-h-min {
    min-height: min-content;
  }
  .wf-max-h-min {
    max-height: min-content;
  }
  .wf-min-w-max {
    min-width: max-content;
  }
  .wf-max-w-max {
    max-width: max-content;
  }
  .wf-min-h-max {
    min-height: max-content;
  }
  .wf-max-h-max {
    max-height: max-content;
  }
  .wf-min-w-fit {
    min-width: fit-content;
  }
  .wf-max-w-fit {
    max-width: fit-content;
  }
  .wf-min-h-fit {
    min-height: fit-content;
  }
  .wf-max-h-fit {
    max-height: fit-content;
  }
  .wf-min-w-xs {
    min-width: 20rem;
  }
  .wf-max-w-xs {
    max-width: 20rem;
  }
  .wf-min-w-sm {
    min-width: 24rem;
  }
  .wf-max-w-sm {
    max-width: 24rem;
  }
  .wf-min-w-md {
    min-width: 28rem;
  }
  .wf-max-w-md {
    max-width: 28rem;
  }
  .wf-min-w-lg {
    min-width: 32rem;
  }
  .wf-max-w-lg {
    max-width: 32rem;
  }
  .wf-min-w-xl {
    min-width: 36rem;
  }
  .wf-max-w-xl {
    max-width: 36rem;
  }
  .wf-min-w-2xl {
    min-width: 42rem;
  }
  .wf-max-w-2xl {
    max-width: 42rem;
  }
  .wf-min-w-3xl {
    min-width: 48rem;
  }
  .wf-max-w-3xl {
    max-width: 48rem;
  }
  .wf-min-w-4xl {
    min-width: 56rem;
  }
  .wf-max-w-4xl {
    max-width: 56rem;
  }
  .wf-min-w-5xl {
    min-width: 64rem;
  }
  .wf-max-w-5xl {
    max-width: 64rem;
  }
  .wf-min-w-6xl {
    min-width: 72rem;
  }
  .wf-max-w-6xl {
    max-width: 72rem;
  }
  .wf-min-w-7xl {
    min-width: 80rem;
  }
  .wf-max-w-7xl {
    max-width: 80rem;
  }

  /* Effect utilities (Opacity, Scale, Ring, Outline) */
  .wf-opacity-0 {
    opacity: 0;
  }
  .wf-hover\:opacity-0:hover {
    opacity: 0;
  }
  .wf-focus\:opacity-0:focus-visible {
    opacity: 0;
  }
  .wf-disabled\:opacity-0:disabled {
    opacity: 0;
  }
  .wf-opacity-50 {
    opacity: 0.5;
  }
  .wf-hover\:opacity-50:hover {
    opacity: 0.5;
  }
  .wf-focus\:opacity-50:focus-visible {
    opacity: 0.5;
  }
  .wf-disabled\:opacity-50:disabled {
    opacity: 0.5;
  }
  .wf-opacity-100 {
    opacity: 1;
  }
  .wf-hover\:opacity-100:hover {
    opacity: 1;
  }
  .wf-focus\:opacity-100:focus-visible {
    opacity: 1;
  }
  .wf-disabled\:opacity-100:disabled {
    opacity: 1;
  }
  .wf-scale-0 {
    transform: scale(0);
  }
  .wf-hover\:scale-0:hover {
    transform: scale(0);
  }
  .wf-scale-50 {
    transform: scale(0.5);
  }
  .wf-hover\:scale-50:hover {
    transform: scale(0.5);
  }
  .wf-scale-75 {
    transform: scale(0.75);
  }
  .wf-hover\:scale-75:hover {
    transform: scale(0.75);
  }
  .wf-scale-90 {
    transform: scale(0.9);
  }
  .wf-hover\:scale-90:hover {
    transform: scale(0.9);
  }
  .wf-scale-95 {
    transform: scale(0.95);
  }
  .wf-hover\:scale-95:hover {
    transform: scale(0.95);
  }
  .wf-scale-100 {
    transform: scale(1);
  }
  .wf-hover\:scale-100:hover {
    transform: scale(1);
  }
  .wf-scale-105 {
    transform: scale(1.05);
  }
  .wf-hover\:scale-105:hover {
    transform: scale(1.05);
  }
  .wf-scale-110 {
    transform: scale(1.1);
  }
  .wf-hover\:scale-110:hover {
    transform: scale(1.1);
  }
  .wf-ring {
    box-shadow: 0 0 0 var(--wf-ring-width, 3px) var(--wf-ring-color, rgba(59, 130, 246, 0.5));
  }
  .wf-focus\:ring:focus-visible {
    box-shadow: 0 0 0 var(--wf-ring-width, 3px) var(--wf-ring-color, rgba(59, 130, 246, 0.5));
    outline: none;
  }
  .wf-active\:ring:active {
    box-shadow: 0 0 0 var(--wf-ring-width, 3px) var(--wf-ring-color, rgba(59, 130, 246, 0.5));
    outline: none;
  }
  .wf-disabled\:ring:disabled {
    box-shadow: none;
  }
  .wf-ring-0 {
    --wf-ring-width: 0px;
  }
  .wf-ring-1 {
    --wf-ring-width: 1px;
  }
  .wf-ring-2 {
    --wf-ring-width: 2px;
  }
  .wf-ring-4 {
    --wf-ring-width: 4px;
  }
  .wf-ring-8 {
    --wf-ring-width: 8px;
  }
  .wf-outline {
    outline-style: solid;
  }
  .wf-outline-0 {
    outline-width: 0px;
  }
  .wf-outline-1 {
    outline-width: 1px;
  }
  .wf-outline-2 {
    outline-width: 2px;
  }
  .wf-outline-4 {
    outline-width: 4px;
  }
  .wf-outline-8 {
    outline-width: 8px;
  }
  .wf-outline-none {
    outline: 2px solid transparent;
    outline-offset: 2px;
  }
  .wf-focus\:outline-none:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
  }
}