/* ============================================================
   Chatkitect Design Tokens
   Inspirado en Microsoft Copilot Studio / Fluent 2
   Acento: índigo sobrio Chatkitect
   ============================================================ */

:root, [data-theme="light"] {
  /* superficies */
  --ck-bg-canvas:        #FAF9F8;
  --ck-bg-surface:       #FFFFFF;
  --ck-bg-surface-alt:   #F3F2F1;
  --ck-bg-sidebar:       #F5F5F4;
  --ck-bg-topbar:        #FFFFFF;
  --ck-bg-hover:         #EDEBE9;

  /* texto */
  --ck-text-primary:     #1F1F1F;
  --ck-text-secondary:   #616161;
  --ck-text-tertiary:    #6E6E6C; /* WCAG AA Normal: 4.8:1 sobre canvas */
  --ck-text-on-accent:   #FFFFFF;
  --ck-text-link:        #0F6CBD;

  /* bordes */
  --ck-border-subtle:    #E5E5E5;
  --ck-border-default:   #D1D1D1;
  --ck-border-strong:    #A19F9D;
  --ck-border-focus:     #5B5FC7;

  /* acento Chatkitect (variante sobria del morado) */
  --ck-accent:           #5B5FC7;
  --ck-accent-hover:     #4A4FB8;
  --ck-accent-pressed:   #3D42A3;
  --ck-accent-soft:      #EEF0FB;
  --ck-accent-soft-hover:#DEE1F7;

  /* estado */
  --ck-success:          #107C10;
  --ck-success-soft:     #DFF6DD;
  --ck-warning:          #B89500;
  --ck-warning-soft:     #FFF4CE;
  --ck-danger:           #C4314B;
  --ck-danger-soft:      #FDE7E9;
  --ck-info:             #0F6CBD;
  --ck-info-soft:        #EBF3FA;

  /* sombras Fluent 2 (casi nulas) */
  --ck-shadow-2:         0 1px 2px rgba(0, 0, 0, .06);
  --ck-shadow-8:         0 2px 4px rgba(0, 0, 0, .08), 0 0 2px rgba(0, 0, 0, .04);
  --ck-shadow-16:        0 4px 8px rgba(0, 0, 0, .10), 0 0 2px rgba(0, 0, 0, .05);
}

[data-theme="dark"] {
  --ck-bg-canvas:        #1F1F1F;
  --ck-bg-surface:       #292929;
  --ck-bg-surface-alt:   #333333;
  --ck-bg-sidebar:       #1A1A1A;
  --ck-bg-topbar:        #292929;
  --ck-bg-hover:         #3B3A39;

  --ck-text-primary:     #F3F2F1;
  --ck-text-secondary:   #C8C6C4;
  --ck-text-tertiary:    #A19F9D;
  --ck-text-on-accent:   #FFFFFF;
  --ck-text-link:        #4DA3E1;

  --ck-border-subtle:    #3B3A39;
  --ck-border-default:   #525150;
  --ck-border-strong:    #797775;
  --ck-border-focus:     #7F85F5;

  --ck-accent:           #8B92F6; /* WCAG AA Normal: 5.15:1 sobre surface dark */
  --ck-accent-hover:     #9CA3F8;
  --ck-accent-pressed:   #6B71E8;
  --ck-accent-soft:      #2A2D4A;
  --ck-accent-soft-hover:#353963;

  --ck-success:          #6BB700;
  --ck-success-soft:     #1F2E1A;
  --ck-warning:          #FFC83D;
  --ck-warning-soft:     #2E2818;
  --ck-danger:           #F1707B;
  --ck-danger-soft:      #2E1A1F;
  --ck-info:             #4DA3E1;
  --ck-info-soft:        #1B2D3D;

  --ck-shadow-2:         0 1px 2px rgba(0, 0, 0, .4);
  --ck-shadow-8:         0 2px 4px rgba(0, 0, 0, .5);
  --ck-shadow-16:        0 4px 8px rgba(0, 0, 0, .6);
}

:root {
  /* radii */
  --ck-radius-sm:   4px;
  --ck-radius-md:   6px;
  --ck-radius-lg:   8px;
  --ck-radius-xl:   12px;
  --ck-radius-pill: 999px;

  /* tipografía */
  --ck-font-family: 'Segoe UI Variable', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif;
  --ck-font-mono:   'Cascadia Code', 'SF Mono', Consolas, 'Courier New', monospace;
  --ck-text-xs:     11px;
  --ck-text-sm:     12px;
  --ck-text-md:     13px;
  --ck-text-lg:     14px;
  --ck-text-xl:     16px;
  --ck-text-2xl:    18px;
  --ck-text-3xl:    22px;
  --ck-text-4xl:    28px;
  --ck-leading-tight:  1.3;
  --ck-leading-normal: 1.45;

  /* iconos */
  --ck-icon-xs: 14px;
  --ck-icon-sm: 16px;
  --ck-icon-md: 20px;
  --ck-icon-lg: 24px;

  /* spacing */
  --ck-space-1:  4px;
  --ck-space-2:  8px;
  --ck-space-3:  12px;
  --ck-space-4:  16px;
  --ck-space-5:  20px;
  --ck-space-6:  24px;
  --ck-space-8:  32px;
  --ck-space-10: 40px;

  /* layout */
  --ck-sidebar-w:           260px;
  --ck-sidebar-collapsed-w: 56px;
  --ck-topbar-h:            48px;
}