/* ===========================================================
   UI Kit — Design Tokens (v2.0)
   来源: base.css 重构，对齐 Dify 色彩体系
   规范: W3C DTCG v1 / Atomic Design / Figma 组件库最佳实践
   =========================================================== */

/* ---- Reset ---- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ================================================
   Layer 1: Primitive Tokens（原始值 — 不直接引用）
   所有色值对齐 Dify light.css / dark.css
   ================================================ */
:root {
  /* -- Core -- */
  --pr-white:          #ffffff;
  --pr-black:          #000000;

  /* -- Gray (Dify 语义色提取的灰度阶梯) -- */
  --pr-gray-50:        #f9fafb;
  --pr-gray-100:       #f2f4f7;
  --pr-gray-200:       #d0d5dc;
  --pr-gray-300:       #676f83;
  --pr-gray-400:       #354052;
  --pr-gray-500:       #101828;
  --pr-gray-600:       #1f2937;
  --pr-gray-700:       #374151;
  --pr-gray-800:       #222225;
  --pr-gray-900:       #1d1d20;

  /* -- Blue (功能交互色，非品牌色) -- */
  --pr-blue-400:       #60a5fa;
  --pr-blue-500:       #2563eb;
  --pr-blue-600:       #1d4ed8;

  /* -- Green (Success) -- */
  --pr-green-50:       #D1FAE5;
  --pr-green-100:      #064E3B;
  --pr-green-500:      #079455;
  --pr-green-600:      #17b26a;

  /* -- Red (Error) -- */
  --pr-red-50:         #FEE2E2;
  --pr-red-100:        #7F1D1D;
  --pr-red-500:        #d92d20;
  --pr-red-600:        #f97066;

  /* -- Yellow (Warning) -- */
  --pr-yellow-50:      #fef9c3;
  --pr-yellow-500:     #eab308;

  /* -- Indigo (落地页选中色) -- */
  --pr-indigo-400:      #818cf8;
  --pr-indigo-500:      #4f46e5;

  /* -- Editor Canvas (棋盘格) -- */
  --pr-checker-dark:    #d0d0d0;
  --pr-checker-light:   #eeeeee;
  --pr-checker-canvas:  #e5e5e5;

  /* -- Toast -- */
  --pr-toast-bg:        #1F2937;
  --pr-toast-text:      #FFFFFF;

  /* -- Spacing (4px 栅格) -- */
  --pr-space-0:         0;
  --pr-space-0-5:       0.125rem;   /* 2px */
  --pr-space-1:         0.25rem;    /* 4px */
  --pr-space-1-5:       0.375rem;   /* 6px */
  --pr-space-2:         0.5rem;     /* 8px */
  --pr-space-2-5:       0.625rem;   /* 10px */
  --pr-space-3:         0.75rem;    /* 12px */
  --pr-space-3-5:       0.875rem;   /* 14px */
  --pr-space-4:         1rem;       /* 16px */
  --pr-space-5:         1.25rem;    /* 20px */
  --pr-space-6:         1.5rem;     /* 24px */
  --pr-space-8:         2rem;       /* 32px */
  --pr-space-10:        2.5rem;     /* 40px */
  --pr-space-12:        3rem;       /* 48px */

  /* -- Radius -- */
  --pr-radius-none:     0;
  --pr-radius-sm:       0.25rem;    /* 4px */
  --pr-radius-md:       0.5rem;     /* 8px */
  --pr-radius-lg:       0.75rem;    /* 12px */
  --pr-radius-xl:       1rem;       /* 16px */
  --pr-radius-full:     9999px;

  /* -- Font Sizes -- */
  --pr-text-xs:         0.75rem;    /* 12px */
  --pr-text-sm:         0.8125rem;  /* 13px */
  --pr-text-base:       0.875rem;   /* 14px */
  --pr-text-lg:         1rem;       /* 16px */
  --pr-text-xl:         1.125rem;   /* 18px */
  --pr-text-2xl:        1.25rem;    /* 20px */

  /* -- Font Weights -- */
  --pr-weight-normal:   400;
  --pr-weight-medium:   500;
  --pr-weight-semibold: 600;
  --pr-weight-bold:     700;

  /* -- Line Heights -- */
  --pr-leading-tight:   1.25;
  --pr-leading-normal:  1.5;
  --pr-leading-relaxed: 1.75;

  /* -- Shadows (对齐 Dify) -- */
  --pr-shadow-sm:       0 1px 3px rgba(0, 0, 0, 0.06);
  --pr-shadow-md:       0 2px 8px rgba(0, 0, 0, 0.1);
  --pr-shadow-lg:       0 4px 16px rgba(0, 0, 0, 0.16);

  /* -- Timing -- */
  --pr-duration-instant: 0.1s;
  --pr-duration-fast:    0.15s;
  --pr-duration-normal:  0.25s;
  --pr-duration-slow:    0.4s;

  /* -- Easing -- */
  --pr-ease-out:         cubic-bezier(0.16, 1, 0.3, 1);
  --pr-ease-in-out:      cubic-bezier(0.65, 0, 0.35, 1);

  /* -- Z-Index -- */
  --pr-z-dropdown:       100;
  --pr-z-sticky:         200;
  --pr-z-modal:          500;
  --pr-z-toast:          1000;
  --pr-z-tooltip:        1100;

  /* -- Breakpoints (for @media reference) -- */
  --pr-bp-sm:            768px;
  --pr-bp-md:            1024px;
  --pr-bp-lg:            1440px;

  /* -- Font Families -- */
  --pr-font-sans:        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --pr-font-cjk:         'AlibabaPuHuiTi', var(--pr-font-sans);
}

/* ================================================
   Layer 2: Semantic Tokens（语义化 — 页面和组件使用）
   值对齐 Dify：浅色 light.css / 深色 dark.css
   ================================================ */
:root {
  /* -- Text（对齐 Dify text-primary/secondary/tertiary/quaternary） -- */
  --text-primary:        var(--pr-gray-500);           /* #101828 */
  --text-secondary:      var(--pr-gray-400);           /* #354052 */
  --text-tertiary:       var(--pr-gray-300);           /* #676f83 */
  --text-quaternary:     rgba(16, 24, 40, 0.3);
  --text-inverse:        var(--pr-white);

  /* -- Background（对齐 Dify background-default） -- */
  --bg-page:             var(--pr-gray-100);           /* #f2f4f7 */
  --bg-surface:          var(--pr-white);              /* #ffffff */
  --bg-surface-raised:   var(--pr-gray-50);            /* #f9fafb */
  --bg-surface-hover:    var(--pr-gray-50);
  --bg-overlay:          rgba(0, 0, 0, 0.5);

  /* -- Border（对齐 Dify divider-solid / regular / subtle） -- */
  --border-default:      var(--pr-gray-200);           /* #d0d5dc */
  --border-weak:         rgba(16, 24, 40, 0.08);
  --border-subtle:       rgba(16, 24, 40, 0.04);
  --border-focus:        var(--pr-blue-500);

  /* -- Interaction -- */
  --hover-overlay:       rgba(128, 128, 128, 0.15);

  /* -- Semantic Colors（对齐 Dify green-600 / red-600） -- */
  --success:             var(--pr-green-500);          /* #079455 */
  --success-bg:          var(--pr-green-50);           /* #D1FAE5 */
  --success-text:        var(--pr-green-500);
  --error:               var(--pr-red-500);            /* #d92d20 */
  --error-bg:            var(--pr-red-50);             /* #FEE2E2 */
  --error-text:          var(--pr-red-500);
  --warning:             var(--pr-yellow-500);
  --warning-bg:          var(--pr-yellow-50);
  --warning-text:        #92400e;

  /* -- Functional Accent（按钮/链接/选中态功能色，非品牌色） -- */
  --color-action:        var(--pr-blue-500);           /* #2563eb */
  --color-action-hover:  var(--pr-blue-600);           /* #1d4ed8 */
  --color-action-subtle: rgba(37, 99, 235, 0.1);

  /* -- Accent（落地页选中色，indigo） -- */
  --accent:              var(--pr-indigo-500);         /* #4f46e5 */
  --accent-bg:           rgba(79, 70, 229, 0.08);
  --accent-border:       rgba(79, 70, 229, 0.25);
  --accent-subtle:       rgba(79, 70, 229, 0.06);

  /* -- Shadow（对齐 Dify shadow） -- */
  --shadow-sm:           var(--pr-shadow-sm);
  --shadow-md:           var(--pr-shadow-md);
  --shadow-lg:           var(--pr-shadow-lg);

  /* -- Layout -- */
  --panel-min-width:     400px;
  --panel-preview-width: 360px;

  /* -- Toast -- */
  --toast-bg:            var(--pr-toast-bg);           /* #1F2937 */
  --toast-text:          var(--pr-toast-text);         /* #FFFFFF */

  /* ==========================================
     Checkerboard（编辑器画布 · Figma 风格）
     Quill 容器透明 → 棋盘格透出 → 任意色文字可见
     配合 -webkit-text-stroke 确保可读性
     ========================================== */
  --checker-dark:        var(--pr-checker-dark);       /* #d0d0d0 */
  --checker-light:       var(--pr-checker-light);      /* #eeeeee */
  --checker-canvas:      var(--pr-checker-canvas);     /* #e5e5e5 */
  --checker-size:        12px;
  --checker-pattern:     repeating-conic-gradient(
                           var(--checker-dark) 0% 25%,
                           var(--checker-light) 0% 50%
                         ) 50% / var(--checker-size) var(--checker-size);
  /* 极淡硬描边 — 文字在棋盘格深浅格子上均可读 */
  --text-stroke:         0.6px rgba(0, 0, 0, 0.22);
}

/* ================================================
   Dark Theme（对齐 Dify dark.css）
   ================================================ */
[data-theme="dark"],
html.dark {
  --text-primary:        #fbfbfc;
  --text-secondary:      #d9d9de;
  --text-tertiary:       rgba(200, 206, 218, 0.6);
  --text-quaternary:     rgba(200, 206, 218, 0.4);
  --text-inverse:        var(--pr-gray-500);

  --bg-page:             var(--pr-gray-900);           /* #1d1d20 */
  --bg-surface:          var(--pr-gray-800);           /* #222225 */
  --bg-surface-raised:   #27272b;
  --bg-surface-hover:    #27272b;
  --bg-overlay:          rgba(0, 0, 0, 0.7);

  --border-default:      #3a3a40;
  --border-weak:         rgba(200, 206, 218, 0.14);
  --border-subtle:       rgba(200, 206, 218, 0.08);
  --border-focus:        var(--pr-blue-400);

  --hover-overlay:       rgba(255, 255, 255, 0.1);

  --success:             var(--pr-green-600);          /* #17b26a */
  --success-bg:          var(--pr-green-100);          /* #064E3B */
  --success-text:        var(--pr-green-600);
  --error:               var(--pr-red-600);            /* #f97066 */
  --error-bg:            var(--pr-red-100);            /* #7F1D1D */
  --error-text:          var(--pr-red-600);
  --warning:             var(--pr-yellow-500);
  --warning-bg:          rgba(234, 179, 8, 0.15);
  --warning-text:        var(--pr-yellow-500);

  --color-action:        var(--pr-blue-400);
  --color-action-hover:  var(--pr-blue-500);
  --color-action-subtle: rgba(96, 165, 250, 0.15);

  --accent:              var(--pr-indigo-400);         /* #818cf8 */
  --accent-bg:           rgba(129, 140, 248, 0.12);
  --accent-border:       rgba(129, 140, 248, 0.3);
  --accent-subtle:       rgba(129, 140, 248, 0.08);

  --shadow-sm:           0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md:           0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-lg:           0 4px 16px rgba(0, 0, 0, 0.5);

  --toast-bg:            #F9FAFB;
  --toast-text:          #1D1D20;

  /* Checkerboard dark */
  --checker-dark:        #3a3a3a;
  --checker-light:       #2e2e2e;
  --checker-canvas:      #1e1e1e;
  --checker-pattern:     repeating-conic-gradient(
                           var(--checker-dark) 0% 25%,
                           var(--checker-light) 0% 50%
                         ) 50% / var(--checker-size) var(--checker-size);
  --text-stroke:         0.6px rgba(255, 255, 255, 0.10);

  /* -- Landingpage dark -- */
  --landingpage-preview-editing-opacity: 0.35;
}


/* ================================================
   Layer 3: Component Tokens（组件级 token）
   引用 Semantic Token，随主题自动切换
   ================================================ */
:root {
  /* -- Button -- */
  --btn-height-sm:       2rem;
  --btn-height-md:       2.5rem;
  --btn-height-lg:       3rem;
  --btn-padding-x-sm:    var(--pr-space-3);
  --btn-padding-x-md:    var(--pr-space-4);
  --btn-padding-x-lg:    var(--pr-space-6);
  --btn-radius:          var(--pr-radius-md);
  --btn-font-size:       var(--pr-text-sm);
  --btn-font-weight:     var(--pr-weight-medium);

  --btn-action-bg:       var(--color-action);
  --btn-action-hover:    var(--color-action-hover);
  --btn-action-text:     var(--pr-white);

  --btn-secondary-bg:    var(--bg-surface);
  --btn-secondary-hover: var(--bg-surface-hover);
  --btn-secondary-border: var(--border-default);

  --btn-ghost-hover:     var(--hover-overlay);

  --btn-danger-bg:       var(--error);
  --btn-danger-hover:    #b91c1c;
  --btn-danger-text:     var(--pr-white);

  --btn-disabled-opacity: 0.4;

  /* -- Input -- */
  --input-height:        var(--btn-height-md);
  --input-radius:        var(--pr-radius-md);
  --input-bg:            var(--bg-surface);
  --input-border:        var(--border-default);
  --input-focus-ring:    0 0 0 3px var(--color-action-subtle);
  --input-placeholder:   var(--text-quaternary);
  --input-padding-x:     var(--pr-space-3);

  /* -- Toolbar -- */
  --toolbar-height:      48px;
  --toolbar-bg:          var(--bg-surface);
  --toolbar-border:      var(--border-default);
  --toolbar-gap:         var(--pr-space-2);
  --toolbar-btn-size:    36px;
  --toolbar-btn-radius:  var(--pr-radius-md);

  /* -- Card -- */
  --card-radius:         var(--pr-radius-lg);
  --card-bg:             var(--bg-surface);
  --card-border:         var(--border-default);
  --card-shadow:         var(--shadow-sm);
  --card-shadow-hover:   var(--shadow-md);
  --card-padding:        var(--pr-space-4);
  --card-header-height:  36px;

  /* -- Modal -- */
  --modal-backdrop:      var(--bg-overlay);
  --modal-radius:        var(--pr-radius-xl);
  --modal-shadow:        var(--shadow-lg);
  --modal-padding:       var(--pr-space-6);

  /* -- Toast -- */
  --toast-radius:        var(--pr-radius-md);
  --toast-padding:       var(--pr-space-3) var(--pr-space-4);
  --toast-shadow:        var(--shadow-lg);

  /* -- Badge -- */
  --badge-radius:        var(--pr-radius-full);
  --badge-padding:       var(--pr-space-0-5) var(--pr-space-2);
  --badge-font-size:     var(--pr-text-xs);

  /* -- Tag -- */
  --tag-radius:          var(--pr-radius-sm);
  --tag-padding:         var(--pr-space-0-5) var(--pr-space-2);
  --tag-font-size:       var(--pr-text-xs);

  /* -- Editor Checkerboard (Figma 风格) -- */
  --editor-canvas-bg:    var(--checker-canvas);
  --editor-canvas-pattern: var(--checker-pattern);

  /* -- Landingpage -- */
  --landingpage-node-thumb-size:   80px;
  --landingpage-editing-overlay:   rgba(255, 255, 255, 0.7);  /* 浅色：白色半透明遮罩 */
  --landingpage-frame-shadow:      0 2px 10px rgba(0, 0, 0, 0.12);
  --landingpage-lightbox-bg:       rgba(0, 0, 0, 0.85);
  --landingpage-spinner-size:      28px;
  --landingpage-spinner-sm:        24px;
  --landingpage-preview-editing-opacity: 0.45;
}

/* ================================================
   Global Base Styles
   ================================================ */
html {
  height: 100%;
  overflow: hidden;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  height: 100%;
  overflow: hidden;
  background: var(--bg-page);
  font-family: var(--pr-font-sans);
  font-size: var(--pr-text-base);
  line-height: var(--pr-leading-normal);
  color: var(--text-primary);
}

/* ---- Focus Ring Utility ---- */
.focus-ring:focus-visible {
  outline: none;
  box-shadow: var(--input-focus-ring);
}

/* ---- Reduced Motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---- Scrollbar (Figma style) ---- */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--hover-overlay);
  border-radius: 3px;
}