/*
 * FE-01 design foundation. This file is intentionally opt-in until FE-02.
 * Semantic consumers must use --yyc-* tokens; legacy --dz-* variables remain
 * untouched so loading the fixture cannot change existing template behaviour.
 */
:root {
  color-scheme: light;

  /* Color */
  --yyc-color-bg: #f6f4ef;
  --yyc-color-surface: #ffffff;
  --yyc-color-surface-subtle: #fbfaf7;
  --yyc-color-text: #242127;
  --yyc-color-text-muted: #6f6a72;
  --yyc-color-text-inverse: #ffffff;
  --yyc-color-border: #ded9d1;
  --yyc-color-border-strong: #b8b1a7;
  --yyc-color-accent: #9b3f3f;
  --yyc-color-accent-hover: #7f3030;
  --yyc-color-accent-soft: #f6eaea;
  --yyc-color-success: #287a55;
  --yyc-color-warning: #a15d08;
  --yyc-color-danger: #b23838;
  --yyc-color-info: #286a9a;
  --yyc-color-focus: #2f6fbb;
  --yyc-color-disabled-bg: #ece9e4;
  --yyc-color-disabled-text: #8f8a83;
  --yyc-color-loading: #d5d0c8;

  /* AUDIT-X5-004: safe V1.1 defaults until AdminCP YYC_* values exist. */
  --yyc-color-brand-primary: #8b5cf6;
  --yyc-color-brand-secondary: #ec4899;
  --yyc-color-function-blue: #3b82f6;
  --yyc-color-accent-purple: #a855f7;
  --yyc-color-shell-header-bg: #e5e7f3;
  --yyc-color-shell-sidebar-bg: #eef2fb;
  --yyc-color-shell-nav-text: #374151;
  --yyc-color-shell-nav-hover-bg: #faf4f6;
  --yyc-color-shell-nav-current-bg: #fff0f5;
  --yyc-color-button-primary-bg: #8b5cf6;
  --yyc-color-button-primary-text: #ffffff;

  /* Typography: system-only, covering Simplified/Traditional Chinese. */
  --yyc-font-sans: "Microsoft YaHei UI", "Microsoft JhengHei UI", "PingFang SC", "PingFang TC", "Noto Sans CJK SC", "Noto Sans CJK TC", Arial, sans-serif;
  --yyc-font-serif: "STSong", "Songti SC", "PMingLiU", serif;
  --yyc-font-mono: Consolas, "SFMono-Regular", monospace;
  --yyc-font-size-12: 0.75rem;
  --yyc-font-size-14: 0.875rem;
  --yyc-font-size-16: 1rem;
  --yyc-font-size-18: 1.125rem;
  --yyc-font-size-20: 1.25rem;
  --yyc-font-size-24: 1.5rem;
  --yyc-font-size-32: 2rem;
  --yyc-font-weight-regular: 400;
  --yyc-font-weight-medium: 500;
  --yyc-font-weight-semibold: 600;
  --yyc-font-weight-bold: 700;
  --yyc-line-height-tight: 1.25;
  --yyc-line-height-body: 1.65;
  --yyc-line-height-relaxed: 1.8;
  --yyc-type-title-size: var(--yyc-font-size-24);
  --yyc-type-title-weight: var(--yyc-font-weight-semibold);
  --yyc-type-body-size: var(--yyc-font-size-16);
  --yyc-type-meta-size: var(--yyc-font-size-14);
  --yyc-type-button-size: var(--yyc-font-size-14);

  /* Space and shape */
  --yyc-space-0: 0;
  --yyc-space-1: 0.25rem;
  --yyc-space-2: 0.5rem;
  --yyc-space-3: 0.75rem;
  --yyc-space-4: 1rem;
  --yyc-space-5: 1.25rem;
  --yyc-space-6: 1.5rem;
  --yyc-space-8: 2rem;
  --yyc-space-10: 2.5rem;
  --yyc-space-12: 3rem;
  --yyc-radius-sm: 0.25rem;
  --yyc-radius-md: 0.5rem;
  --yyc-radius-lg: 0.75rem;
  --yyc-radius-pill: 999px;
  --yyc-border-width: 1px;
  --yyc-border: var(--yyc-border-width) solid var(--yyc-color-border);
  --yyc-shadow-sm: 0 1px 3px rgba(36, 33, 39, 0.08);
  --yyc-shadow-md: 0 8px 24px rgba(36, 33, 39, 0.12);
  --yyc-shadow-overlay: 0 16px 48px rgba(36, 33, 39, 0.2);

  /* Layers, icons and controls */
  --yyc-layer-base: 0;
  --yyc-layer-sticky: 100;
  --yyc-layer-dropdown: 300;
  --yyc-layer-overlay: 600;
  --yyc-layer-modal: 700;
  --yyc-layer-toast: 800;
  --yyc-icon-sm: 1rem;
  --yyc-icon-md: 1.25rem;
  --yyc-icon-lg: 1.5rem;
  --yyc-control-sm: 2rem;
  --yyc-control-md: 2.5rem;
  --yyc-control-lg: 2.75rem;
  --yyc-touch-target: 2.75rem;

  /* Layout. Runtime width mode owns the effective container choice. */
  --yyc-container-narrow: 62rem;
  --yyc-container-default: 75rem;
  --yyc-container-wide: 90rem;
  /* xmyc_liblib is fluid. These scales remain local-component tools only. */
  --yyc-container-max: none;
  --yyc-gutter: 1.5rem;
  --yyc-sidebar-min: 14rem;
  --yyc-sidebar-max: 18rem;
  --yyc-content-min: 0;
  --yyc-grid-gap: var(--yyc-space-6);
  --yyc-breakpoint-mobile: 47.9375rem; /* contract: < 768px */
  --yyc-breakpoint-compact: 79.9375rem; /* contract: 768-1279px */
  --yyc-breakpoint-desktop: 80rem; /* contract: >= 1280px */

  /* Interaction */
  --yyc-duration-fast: 120ms;
  --yyc-duration-normal: 200ms;
  --yyc-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --yyc-focus-ring: 0 0 0 3px rgba(47, 111, 187, 0.3);
  --yyc-disabled-opacity: 0.56;
  --yyc-loading-shimmer: linear-gradient(90deg, #ece9e4 25%, #f7f5f1 50%, #ece9e4 75%);

  /* Shared UI V1 component aliases. They derive from the frozen adapter chain. */
  --yyc-component-bg: var(--yyc-color-surface);
  --yyc-component-bg-subtle: var(--yyc-color-surface-subtle);
  --yyc-component-border: var(--yyc-color-border);
  --yyc-component-border-strong: var(--yyc-color-border-strong);
  --yyc-component-radius: var(--yyc-radius-md);
  --yyc-component-shadow: var(--yyc-shadow-sm);
  --yyc-component-gap: var(--yyc-space-3);
  --yyc-media-ratio: 16 / 9;
  --yyc-control-ring: var(--yyc-focus-ring);
}
@media (max-width: 79.9375rem) {
  :root { --yyc-gutter: 1.25rem; --yyc-grid-gap: var(--yyc-space-5); }
}

@media (max-width: 47.9375rem) {
  :root {
    --yyc-gutter: 1rem;
    --yyc-grid-gap: var(--yyc-space-4);
    --yyc-type-title-size: var(--yyc-font-size-20);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --yyc-duration-fast: 0ms; --yyc-duration-normal: 0ms; }
}